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[ 视 化 库 一 一 D3。 作 者 通过 风 
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绘图 、 比 例 尺 、 数 轴 、 数 据 更 新 、 过 渡 和 动画 等 构建 交互 式 在 线 图 表 的 核心 概念 ， 
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本 书 是 关于 数据 可 视 化 的 ， 但 非 专 业 程 序 员 也 可 以 看 懂 。 如 果 你 是 一 位 艺术 家 或 者 
拥有 视觉 表现 经 验 的 图 形 设计 师 ， 那 么 这 本 书 就 是 为 你 写 的 。 如 果 你 是 一 位 专栏 作 
者 或 者 研究 人 员 ， 但 之 前 没有 可 视 化 或 编程 经 验 ， 那 这 本 书 也 是 写 给 你 的 。 








本 书 介绍 JavaScript 的 数据 可 视 化 库 D3 (http://d3js.org/)， 它 可 以 把 数据 加 载 到 网 
页 中 并 基于 数据 生成 各 种 图 表 。 要 看 懂 这 本 书 ， 之 前 有 没有 编程 经 验 不 太 重 要 。 也 
许 你 以 前 写 过 程序 ， 也 听 说 过 关于 JavaScript 语言 的 各 种 传闻 ， 那 你 可 以 从 D3 和 数 
据 可 视 化 入 手 ， 跟 JavaScript 第 一 次 亲密 接触 。 没 错 ，JavaScript 是 有 那么 一 点 点 古 
怪 ， 但 并 没有 你 听 说 得 那么 坏 ， 一 切 其 实 都 很 好 。 请 坐 ， 稍 安 终 躁 。 


本 书 脱胎 于 我 在 自己 网 站 上 发 布 的 一 系列 文章 。 当 时 (2012 年 1 月 )， 还 很 难 找到 
面向 新 手 的 D3 学 习 资 料 。 我 的 网 站 访问 量 很 快 就 达到 每 天 儿 百 ， 其 至 儿 千 次 ， 这 
说 明 人 们 对 这 个 领域 (尤其 是 D3) 的 关注 度 与 日 俱 增 。 如果 你 看 过 那 一 系列 教程 ， 
那 对 本 书 内 容 会 很 熟悉 。 不 过 ， 我 也 补充 了 很 多 新 内 容 ， 包 括 更 多 的 示例 、 有 用 的 
提示 以 及 建议 。 此 外 ， 本 书 78% 以 上 都 是 冷笑 话 。 


数据 可 视 化 是 一 个 跨 学 科 的 领域 ， 因 此 一 本 书 不 可 能 涵盖 所 有 技术 。 好 在 ， 随 着 这 
个 领域 越 来 越 热门 ， 市 面 上 也 有 很 多 这 类 书 可 以 选择 ， 能 够 起 到 相互 补充 的 作用 。 


比如 ， 有 讨论 设计 流程 的 : 

















。 Designing Data Visualizations: Intentional Communication from Data to Display， 作 者 
是 Noah lliinsky 和 Julie Steele (O’Reilly Media, 2011) ; 

。 Data Visualization: A Successful Design Process， 作 者 Andy Kirk (Packt Publishing， 
2012)。 


XI 


有 关于 视觉 设计 原理 和 技术 的 : 


。 The Functional Art: An Introduction to Information Graphics and Visualization， 作 者 
Alberto Cairo (New Riders, 2012); 

。 Information Dashboard Design: The Effective Visual Communication of Data， 作 者 
Stephen Few (O’Reilly Media, 2006)。 


还 有 探讨 数据 实战 的 : 


。 Bad Data Handbook: Mapping the World of Data Problems， 作 者 Q. Ethan McCallum 
(O’Reilly Media, 2012) ; 

。 Data Analysis with Open Source Tools: A Hands-On Guide for Programmers and Data 
Scientists ， 作 者 Philipp K. Janert (O’Reilly Media，2010) ; 

。 Python for Data Analysis: Agile Tools for Real World Data, 作者 Wes McKinney (O’Reilly 
Media, 2012)。 


排版 约定 
本 书 使 用 的 排版 约定 如 下 。 


。 楷体 
表示 新 的 术语 。 





。 等 宽 字体 
表示 程序 片段 ， 也 用 于 在 正文 中 表示 程序 中 使 用 的 变量 、 国 数 名 、 命 令 行 代 码 、 
环境 变量 、 语 句 和 关键 词 等 代码 文本 。 

。 加 粗 的 等 
表示 应 该 

。 倾斜 的 等 
表示 应 该 由 


Ef 
ve 
4 


na 
一 EE 和》 这 个 图 标 代表 敬告 信息 








本 
用 户 逐 字 输 入 的 命令 或 者 其 他 文本 。 


王 


户 输入 的 值 或 根据 上 下 文 决 定 的 值 奉 换 的 文本 。 





这 个 图 标 代表 小 窑 门 、 建 议 或 说 明 。 





直 直 




















使 用 代码 


本 书 就 是 要 帮 读 者 解决 实际 问题 的 。 也 许 你 需要 在 自己 的 程序 或 文档 中 用 到 本 书 中 
的 代码 。 除 非 大 段 大 段 地 使 用 ， 否 则 不 必 与 我 们 联系 取得 授权 。 因 此 ， 用 本 书 中 的 
几 段 代码 写成 一 个 程序 不 用 向 我 们 申请 许可 。 但 是 销售 或 者 分 发 O'Reilly 图 书 随 附 
的 代码 光盘 则 必须 事先 获得 授权 。 引 用 书 中 的 代码 来 回答 问题 也 无 需 我 们 授权 。 将 
大 段 的 示例 代码 整合 到 你 自己 的 产品 文档 中 则 必须 经 过 许可 。 


使 用 我 们 的 代码 时 ， 和 希望 你 能 标明 它 的 出 处 。 出 处 一 般 要 包含 书 名 、 作 者 、 出 
版 商 和 ISBN， 例 如 : Interactive Data Visualization for the Web by Scott Murray 
(O’Reilly). Copyright 2013 Scott Murray, 978-1-449-33973-9。 























如 果 还 有 其 他 使 用 代码 的 情形 需要 与 我 们 沟通 ， 可 以 随时 与 我 们 联系 : permissions@ 


oreilly.com 。 


Safari2 Books Online 








ee》 Safari Books Online (www.safaribooksonline.com) 是 应 
Safa 上 中 需 而 变 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 
Books Online 世界 顶级 技术 和 商务 作家 的 专业 作品 。 


Safari Books Online 是 技术 专家 、 软 件 开 发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 人 
士 开展 调研 、 解 决 问题 、 学 习 和 认证 培训 的 第 一 手 资 料 。 

对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 
的 定价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media、 


Prentice Hall Professional、 Addison-Wesley Professional、 Microsoft Press、Sams、 





Que、 Peachpit Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress.、 
Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press. FT Press、 Apress. 
Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology 以 及 其 他 
几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正式 出 版 之 前 的 书稿 。 要 了 解 Safari Books 
Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 


请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
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美国 : 


O’Reilly Media, Inc. 

1005 Gravenstein Highway North 

Sebastopol, CA 95472 

800-998-9938 (in the United States or Canada) 
707-829-0515 (international or local) 


707-829-0104 (fax) 


中 国 : 


北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 莱 利 技术 咨询 (北京 ) 有 限 公司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 
表 、 示 例 代 码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 


http://oreil.ly/interactive_data_visualization_web 








中 文 版 地 址 : 








http://www.oreilly.com.cn/index.php?func=book&isbn=978-7-115-32011-7 


对 于 本 书 的 评论 和 技术 


性 问题 ， 请 发 送 电 子 邮件 到 : 


bookquestions @oreilly.com 





要 了 解 更 多 O’Reilly 图 


书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 


我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 


请 关注 我 们 的 Twitter 动态 : 


http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 


http://www.youtube.com/oreillymedia 


致谢 


我 的 名 字 虽 然 印 在 了 封面 上 ， 但 作为 作者 ， 我 感觉 自 
每 一 页 的 内 容 甚 实 是 萃取 了 几 百 位 杰出 人 物 智 慧 的 结 品 。 





己 只 不 过 是 一 个 “漏斗 "。 本 书 
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感谢 Rosten Woo， 我 的 第 一 个 D3 项 目 就 是 跟 他 一 起 做 的 ， 是 他 带 我 结识 了 这 个 新 
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Jan 鼓励 我 接触 了 一 个 叫 Processing 的 东西 。 从 那 时 起 ， 我 的 职业 生涯 就 完全 转向 
了 编程 艺术 设计 、 数 据 可 视 化 。 今 天 ， 又 有 了 这 本 书 。 

我 跟 编 辑 Meghan Blanchette 及 O’Reilly 的 其 他 人 合作 非常 愉快 。 感 谢 Meghan 和 她 
的 团队 为 出 版 这 本 书 前 前 后 后 地 忙碌 了 那么 多 天 ， 让 本 来 无 法 触及 的 思想 变 成 了 现 
实 当 中 看 得 见 摸 得 着 的 一 本 书 ， 而 且 还 有 很 多 字 和 奇形怪状 的 图 表 印 在 了 里 面 。 
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第 1 章 


写 在 前 面 





1.1 数据 为 什么 要 可 视 化 

这 个 信息 时 代 更 多 地 让 人 觉得 它 是 个 信息 过 剩 的 时 代 。 铺 天 盖 地 般 的 信息 令 人 目 不 
眼 接 ， 很 多 未 经 加 工 的 原始 信息 只 有 使 用 基 种 方法 找 出 其 中 的 规律 才 有 价值 。 

谢 天 谢 地 ， 我 们 人 类 是 对 图 形 图 像 极 为 敏感 的 生物 。 虽 然 很 少 有 人 能 从 一 堆 数字 中 
发 现 趋势 ， 但 即使 是 小 孩子 也 能 看 懂 条 形 图 ， 并 且 能 从 这 些 图 形 中 明白 数字 的 含义 。 
正 因为 如 此 ， 数 据 可 视 化 成 了 一 上 股 潮 流 。 可 视 化 数据 成 为 与 人 沟通 的 最 便捷 方式 。 
当然 ， 数 据 可 视 化 跟 用 语言 描述 一 样 ， 都 可 能 “撒谎 ”、 误 导 人 ， 甚 至 扭曲 事实 。 不 
过 ， 只 要 潜心 学 习 ， 多 加 小 心 ， 把 数据 变 成 生动 的 图 表 就 能 帮 有 我 们 从 一 个 全 新 的 角 
度 来 看 懂 这 个 世界 ， 从 中 揭示 出 原先 隐藏 的 一 些 模式 和 趋势 。 运 用 得 当 ， 数 据 可 视 
化 是 可 以 开口 讲 故事 的 。 

如 果 从 字面 上 来 理解 ， 可 视 化 就 是 把 信息 映射 为 可 见 图 形 的 过 程 。 我 们 必须 总 结 出 
一 些 规则 ， 解 读数 据 ， 同 时 把 数据 变 成 有 形 的 东西 。 比 如 图 1-1 中 这 个 最 基本 的 条 
形 图 吧 ， 它 就 是 根据 一 个 最 简单 的 规则 生成 的 : 较 大 的 数值 映射 为 较 高 的 条 形 。 
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图 1-1: 将 数据 值 映射 为 条 形 ' 


注 1: 本 书 部 分 彩 图 请 在 图 灵 社 区 本 书页 面 下 载 : http://www.ituring.com.cn/book/1126。 一 一 编者 注 





















































图 形 越 复杂 ， 数 据 集 越 复杂 ， 规 则 也 就 越 复杂 。 


1.2 为 什么 要 与 代码 


手工 完成 数据 到 图 形 的 映射 不 是 不 行 ， 但 效率 太 低 ， 也 太 乏 味 。 所 以 ， 一 般 我 们 都 
要 利用 计算 机 来 提高 工作 效率 。 效 率 上 来 了 ， 才 能 把 时 间 放 在 研究 更 大 的 数据 集 上 ， 
这 样 才能 处 理 几 千 条 数据 ， 甚 至 几 百 万 条 数据 。 这 么 大 的 数据 量 ， 如 果 全 靠 手 工 得 
几 年 ， 用 计算 机 不 过 瞬间 而 已 。 还 有 一 点 同样 重要 ， 利 用 计算 机 可 以 快速 验证 不 同 
的 映射 思路 ， 改 一 改 规则 然后 就 能 即刻 看 到 重新 生成 的 输出 结果 。 这 个 不 断 重复 的 
“ 写 代 码 - 呈现 -评估 ”的 过 程 ， 是 快速 迭代 、 设 计 出 最 优 映 射 规则 的 关键 。 


映射 规则 发 挥 的 是 设计 系统 的 作用 ， 不 用 人 手工 描绘 ， 计 算 机 帮 有 我 们 干 。 我 们 人 呢 ， 
应 该 把 精力 放 在 挖 概念 、 找 联系 和 写 规则 上 面 ， 其 他 统统 让 计算 机 帮 我 们 搞定 。 


遗憾 的 是 ， 计 算 机 软件 (通常 是 计算 模型 ) 很 难 精 确 表 达 人 类 的 所 思 所 想 。( 说 句 公 
道 话 ， 很 多 人 其 实 也 不 善于 表达 自己 的 想法 。) 因为 计算 机 是 二 进 制 系统 ， 所 有 一 切 
都 是 开关 、 是 否 、 这 个 那个 、 这 里 或 非 这 里 。 人 类 作为 感性 宽厚 的 生物 ， 在 计算 机 
不 愿意 迁就 我 们 的 时 候 ， 我 们 只 能 迁就 它 。 于 是 不 可 避免 地 ， 我 们 就 要 学 习 写 代码 ， 
编 软件 。 我 们 学 着 跟 计算 机 沟通 ,使 用 非常 有 限 但 又 很 精确 的 语法 ， 好 让 计算 机 能 
够 更 好 地 理解 我 们 。 


看 见 自己 做 出 来 的 可 视 化 效果 那么 棒 ， 我 们 的 心 都 醉 了 ， 于 是 就 会 继续 写 代 码 。 而 
一 旦 目睹 前 所 未 见 的 可 视 化 效果 ， 我 们 又 欲罢不能 ， 于 是 就 不 断 重复 着 这 个 过 程 。 
恰似 像 神秘 的 数据 魔 瓶 里 跑 出 来 一 个 天 才 的 视觉 魔法 师 。 


1.3 为 什么 要 交互 


静态 可 视 化 展示 的 只 是 预先 合成 好 的 数据 “视图 ”， 而 要 展示 相同 信息 的 不 同 侧面 ， 
往往 需要 多 个 静态 视图 。 在 静态 视图 中 ， 数 据 的 维度 同样 也 是 受 限 的 ， 因 为 所 有 可 
视 化 的 要 素 必 须 同时 展示 在 同一 个 表面 上 。 要 在 静态 视图 中 表现 多 维 数据 的 难度 势 
比 登 天 。 固 定 不 变 的 图 像 什么 时 候 最 合适 ?除非 像 印刷 或 打印 时 ， 不 需要 也 没有 必 
要 弄 一 堆 视图 。 


然而 ， 动 态 的 响应 式 的 图 形 可 以 激发 人 们 探索 数据 的 和 欲望。1996 年 ， 马 里 兰 大 学 的 
Ben Shneiderman 率先 在 “Visual Information-Seeking Mantra” 中 提出 “ 先 给 出 一 个 
大 小 合适 、 算 选 得 当 的 概要 ， 然 后 根据 需要 展示 细节 ”， 由 此 开始 ， 大 多 数 交 互 可 视 
化 工具 的 基本 功能 就 发 生 了 变化 。 





















































今天 ， 许 多 交互 式 可 视 化 作品 中 都 有 这 种 设计 模式 的 影子 。 不 同 功能 的 组 合 是 有 效 
的 ， 因 为 无 论 你 只 想 大 概 浏 览 或 了 解 一 下 数据 集 ， 还 是 带 着 某 个 疑问 想 从 可 视 化 图 
形 中 找到 答案 ， 这 种 模式 都 可 以 胜任 。 总 之 ， 展 示 数 据 概要 同时 又 配 有 一 系列 “ 挖 
据 ” 工 具 的 交互 式 可 视 化 作品 ， 能 够 同时 满足 多 种 用 户 的 需要 ， 无 论 他 是 相关 领域 
的 新 人 ， 还 是 已 经 非常 熟 答 于 相关 数据 。 


当然 啦 ， 交 互 性 也 能 起 到 静态 图 像 没 办 法 起 到 的 鼓励 参与 的 作用 。 动 态 切换 和 制作 
精美 的 界面 ， 经 常会 让 探索 数据 的 人 产生 玩 游戏 的 感觉 。 因 此 ， 交 互 可 视 化 能 够 把 
那些 原本 会 对 相关 主题 和 数据 视而不见 的 人 吸引 过 来 ， 你 说 它 重要 不 重要 ? 


1.4 为 什么 要 在 Web 上 


看 不 见 的 可 视 化 不 叫 可 视 化 。 生 成 了 可 视 化 作品 ， 把 它 展 示 给 别人 至 关 重 要 ， 而 在 
Web 上 发 布 是 向 全 世界 展示 的 最 快捷 方式 。 采 用 标准 的 Web 技术 ， 意 味 着 只 要 是 使 
用 较 新 浏览 器 的 人 都 能 看 到 和 体验 你 的 成 果 ， 而 跟 他 们 使 用 的 操作 系统 (Windows、 
Mac、Linux) 和 设备 〈 笔 记 本 、 台 式 机 、 智 能 手机 、 平 板 电脑 ) 无关。 


最 关键 的 是 ， 本 书 介绍 的 一 切 都 可 以 通过 免费 工具 来 实现 。 因 此 ， 作 为 学 习 者 ， 你 
唯一 的 成 本 就 是 自己 的 时 间 。 本 书 讨论 的 一 切 都 基于 开源 的 、 符 合 Web 标准 的 
技术 。 


避 开 了 专 有 软件 和 播 件 ， 就 能 保证 你 的 工作 成 果 可 以 无 障碍 地 送 达 各 种 设备 ， 台 式 
计算 机 、 平 板 电脑 、 智 能 手机 ， 都 没 问 题 。 作 品 越 容易 被 人 看 到 ， 你 的 受众 就 越 多 ， 
你 的 影响 就 越 大 。 


1.5 这 是 一 本 什么 书 

本 书 基于 D3 这 个 强大 的 Web 可 视 化 展示 工具 ， 涉 及 数据 可 视 化 、 交 互 设 计 和 Web 
开发 这 三 个 主题 。 全 书 所 有 内 容 都 是 我 在 学 习 使 用 D3 期 间 摸索 和 积累 的 经 验 教训 
的 结晶 。 可 能 很 多 读者 (包括 我 自己 ) 原来 都 有 一 些 设计 、 绘 图 和 数据 可 视 化 的 经 
验 ， 但 也 许 对 编程 和 计算 机 知道 的 不 多 。 


D3 被 误解 说 很 难 学 ， 我 觉得 这 是 不 公允 的 。D3 没有 那么 复杂 ， 而 是 它 立 足 的 
Web 有 点 复杂 。 不 过 ， 要 想 熟练 地 使 用 D3， 的 确 需要 一 些 先 行 的 Web 知识 ， 包 括 
HTML、CSS、JavaScript 和 SVG。 很 多 人 (包括 我 自己 ) 都 是 自学 的 这 些 技术 。 自 
学 本 身 不 是 问题 ， 因 为 门槛 很 低 ， 但 它 存在 一 定 问题 ， 因 为 你 不 一 定 会 从 头 学 起 ， 
所 以 有 时 候 难 免 会 采用 一 些 偏 门 手法 应 付 差事 ， 得 过 且 过 。 说 实话 ， 真 要 用 好 D3， 











就 得 老 老实 实地 掌握 一 些 基 础 知识 。 


因为 D3 是 用 JavaScript 写 出 来 的 ， 所 以 学 习 它 通常 意味 着 要 理解 很 多 JavaScript 代 
码 。 对 我 们 很 多 搞 数据 的 人 而 言 ，D3 是 他 们 学 习 JavaScript (乃至 通常 所 说 Web 开 
发 ) 的 起 点 。 单 学 一 门 语言 已 经 够 难 的 了 ， 更 何况 是 用 这 门 语言 写 的 新 程序 库 呢 。 
但 掌握 了 JavaScript， 你 就 可 以 利用 D3 尝试 一 些 从 未 做 过 的 事 。 难 学 归 难 学 ， 我 地 
保证 你 在 这 门 语言 和 新 工具 上 投入 的 时 间 会 得 到 意 想 不 到 的 回报 。 


我 写 这 本 书 的 目的 就 是 缩短 读者 的 学 习 时 间 ， 好 让 你 尽早 开始 着 手 做 出 好 东西 来 。 
本 书 会 采取 由 浅 入 深 的 思路 ， 先 从 基本 概念 讲 起 ， 慢 慢 地 过 渡 到 复杂 主题 。 我 不 想 
过 多 地 跟 大 家 介绍 具体 的 可 视 化 效果 ， 而 主要 把 篇 幅 集中 于 全 面 深 入 地 探讨 D3 的 
工作 原理 ， 以 便 你 将 来 可 以 随心 所 欲 地 利用 它 来 生成 符合 自己 需要 的 作品 。 


1.6 读者 是 谁 

:完全 可 以 是 一 位 新 手 ， 不 用 了 解数 据 可 视 化 ， 不 用 了 人 解 Web 开发 ， 其 至 两 都 不 
需要 了 解 。( 放 心 吧 ! ) 也 许 你 是 一 位 专栏 作者 ， 想 把 采访 过 程 中 收集 的 数据 以 
可 视 化 形式 展示 出 来 。 也 许 你 是 一 位 设计 师 ， 绘 制 一 幅 静 态 的 信息 图 对 你 来 说 只 
是 信 手 牛 来 的 事 ， 但 你 希望 能 更 上 一 层 楼 ， 掌 握 制 作 Web 交互 作品 的 技术 。 也 
许 你 是 一 位 艺术 家 ， 醇 心 于 根据 数据 来 生成 艺术 作品 。 也 许 你 是 一 位 程序 员 ， 对 
JavaScript 和 Web 并 不 陌生 ， 但 强烈 希望 和 掌握 一 个 新 工具 ， 体 验 一 番 数 据 可 视 化 的 
乐趣 。 


好 了 ， 不管 你 是 谁 ， 我 都 希望 你 : 


。 昕 过 说 “万 维 网 ”"， 或 者 知道 什么 叫 “ 上 网 ”; 

。 稍微 懂 点 HTML、DOM 和 CSS; 

。 甚至 有 点 编程 经 验 ; 

。 上 听 说 过 jQuery， 或 者 写 过 JavaScript 代码 ，; 

。 昕 到 CSV、SVG 或 JSON 这 些 新 词汇 ， 不 会 被 吓 异 ，; 
。 想 做 一 些 有 价值 的 交互 式 可 视 化 项 目 。 


即使 上 面 提 到 的 这 些 东 西 你 没 听 过 说 或 不 太 了 解 ， 也 不 用 担心 。 只 要 花 点 时 间 看 看 
第 3 章 就 好 了 ， 那 一 章 介 绍 了 在 学习 D3 之 前 真正 需要 了 解 的 东西 。 

1.7 这 不 是 什么 书 

这 不 是 一 本 计算 机 专业 人 士 才 能 看 懂 的 书 ， 不 是 一 本 教 人 深入 学 习 错 综 复 杂 的 Web 
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技术 的 书 。 


本 着 这 个 原则 ， 我 可 能 会 在 书 中 隐 蕊 一 些 技术 细 闻 ， 粗 略 地 讲解 一 些 重要 的 基础 概 
念 。 至 于 讲解 的 方式 ， 候 怕 会 让 资深 软件 工程 师 不 悄 一 顾 。 这 没什么 ， 因 为 这 本 书 
是 写 给 艺术 家 和 设计 师 的 ， 不 是 写 给 工程 师 大 牛 的 。 我 们 只 会 涉及 基本 概念 ， 要 想 
深入 某 些 技术 细节 ， 你 要 量力 而 行 。 

另外 ， 我 有 意 没 有 给 出 某 些 问题 的 全 部 解决 方案 ， 而 是 只 向 大 家 推荐 我 认为 最 简单 
的 方案 ， 就 算 不 是 最 简单 ， 也 应 该 是 最 好 理解 的 。 

我 的 目标 是 让 大 家 理解 D3 的 基本 概念 和 方法 。 为 此 ， 本 书 就 没有 办 法 围绕 特定 的 
示例 项 目 来 组 织 。 而 每 个 人 的 设计 目标 和 数据 集 千差万别 ， 所 以 只 要 掌握 了 基本 概 
念 和 方法 ， 至 于 怎么 用 、 用 到 哪 ， 就 完全 悉 听 尊 便 了 。 


1.8 使 用 示例 代码 


如 果 你 是 一 位 天 才 ， 可 能 不 用 看 示例 文件 就 能 学 会 D3。 如 果 是 这 样 ， 本 节 下 面 的 内 
容 可 以 不 看 。 


如 果 你 跟 我 一 样 ， 虽 然 很 聪明 ， 但 还 没有 达到 天 才 的 地 步 ， 那 了 臣 怕 必须 借助 本 书 随 
附 的 示例 代码 ， 才 能 看 懂 这 本 书 。 在 看 书 之 前 ， 请 先 到 GitHub 上 下 载 完 整 的 示例 
代码 文件 (http:/Wt.cn/zTI9BXG ) 。” 


正常 人 通常 是 点 击 ZIP 文件 的 链接 来 下 载 ， 而 骨灰 级 玩家 愿意 使 用 Git 来 克隆 代码 。 
如 果 你 听 不 太 明 和 白 后 半 句 话 是 什么 意思 ， 就 按照 前 半 句 话 的 意思 做 好 了 。 


在 下 载 到 的 压缩 文件 中 ， 每 章 的 代码 文件 都 放 在 以 相应 章 名 命名 的 文件 夹 里 ， 比 如 


chapter 04 
chapter 05 
chapter 06 
chapter 07 
chapter 08 


文件 按 章 组 织 ， 因 此 第 9 章 在 提 到 01_bar_chart.html 时 ， 你 就 知道 这 个 文件 的 位 置 
是 : d3-book/chapter_9/01_bar_chart.html。 


只 要 不 是 出 于 商业 目的 ， 你 可 以 随便 复制 、 使 用 、 修 改 和 重用 这 些 代 码 。 














注 1: 也 可 以 从 图 灵 社 区 下 载 : http://www.ituring.com.cn/book/1126。 编者 注 














1.9 谢谢 你 
最 后 我 想 说 ， 我 已 经 尽 最 大 努力 把 这 本 书写 好 ， 而 且 为 了 保证 大 家 的 学 习 效果 反复 
进行 了 修改 。 谢 谢 你 看 这 本 书 ， 希望 你 能 从 中 学 习 到 知识 ， 其 至 感受 到 乐趣 。 
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第 2 章 


D3 简介 





D3 (有 了 时候 也 叫 DD 或 d3.js) 是 一 个 JavaScript 库 ， 用 于 创建 数据 可 视 化 图 形 。 但 
这 么 说 多 少 还 是 有 点 低估 它 了 。 








事实 上 ，D3 是 一 个 缩写 ， 它 的 全 称 叫 Data-Driven Documents (数据 驱动 的 文档 )。 
数据 来 源 于 你 ， 而 文档 就 是 基于 Web 的 文档 (或 者 网 页 )， 代 表 可 以 在 浏览 器 中 展 
现 的 一 切 ， 比 如 HTML、SVG。D3 扮演 的 是 一 个 驱动 程序 的 角色 ， 因 为 它 联系 着 
数据 和 文档 。 

当然 ， 这 个 名 字 也 能 让 人 直观 地 联想 到 Web 开发 背后 的 那个 关键 词 : W3 ( 即 World 
Wide Web ， 万 维 网 ) ， 现 在 简称 “Web” (也 就 是 人 们 常 说 的 “上 网 ”的 “网 ”)。 


D3 的 主要 作者 是 才华 横 汶 的 Mike Bostock， 此 外 还 有 几 位 贡献 者 。 这 个 项 目 完全 是 
开源 的 ， 托 管 在 GitHub 上 (https:Wgithub.com/mbostock/d3/) ， 任 何人 都 可 以 自由 
使 用 。 


D3 的 许可 方式 是 BSD， 因 此 无 论 你 出 于 商业 还 是 非 商 业 目 的 使 用 、 修 改 和 整合 它 ， 
都 不 用 付出 任何 代价 。 














D3 官方 网 站 是 http://d3js.org。 


2.1 D3 能 做 什么 
简单 地 说 ，D3 是 一 个 很 不 错 的 软件 ， 它 能 帮 你 生成 和 操作 带 数据 的 文档 。 为 此 ， 要 








经 历 以 下 几 步 : 


把 数据 加 载 到 浏览 器 的 内 存 空间 ， 

把 数据 绑 定 到 文档 中 的 元 素 ， 根 据 需要 创建 新 元 素 ， 

解析 每 个 元 素 的 范围 资料 (bound datum) 并 为 其 设置 相应 的 可 视 化 属性 ， 实 现 
元 素 的 变换 (transforming ) ; 

响应 用 户 输入 实现 元 素 状 态 的 过 渡 (transitioning)。 











学 习 D3 的 过 程 ， 就 是 学 习 那些 告诉 它 如 何 加 载 、 绑 定数 据 ， 变 换 和 过 渡 元 素 的 语 
法 的 过 程 。 

其 中 ， 变 换 这 一 步 最 重要 ， 因 为 映射 关系 在 这 一 步 起 作用 。D3 为 应 用 不 同 的 变换 提 
供 了 一 个 构造 ， 不 过 映射 规则 还 得 由 你 来 定 。 大 数值 应 该 映射 为 更 长 的 条 形 ， 还 是 
颜色 更 浅 的 圆 形 ? 数据 聚 类 (cluster) 在 x 轴 应 该 按 年 龄 还 是 按 类 别 排序 ? 世界 地 








图 中 的 国家 应 该 用 什么 颜色 来 填充 ? 诸如 此 类 的 设计 决定 完全 是 你 的 事 。 你 来 挖掘 
概念 、 编 写 规则 ，D3 来 执行 











你 不 用 管 它 怎么 执行 。( 没 错 ， 跟 Excel 中 那个 爱 


出 风头 的 “图 表 向 导 ” 人 恰好 相反 。) 


2.2 D3 不 能 做 什么 
下 面 这 些 事 D3 都 不 能 做 。 


D3 不 能 生成 预定 义 的 或 “事先 处 理 好 ”的 视觉 图 形 。 是 有 意 不 这 么 做 的 。D3 主 
要 用 于 生成 那些 解释 型 的 ， 而 非 探 索 型 的 可 视 化 图 形 。 探 索 型 工具 可 以 帮 你 发 现 
数据 中 明显 的 、 有 价值 的 模型 。Tableau (http:Wwww.tableausoftware.com/) 和 
ggplot2 (http://ggplot2.org/)， 这 都 是 探索 型 工具 ， 能 帮 你 根据 相同 的 数据 集 生成 
多 个 视图 。 这 一 点 很 基础 ， 但 却 不 同 于 生成 数据 的 解释 型 表现 ， 即 通过 数据 视图 
表现 出 你 已 经 发 现 的 结论 。 解 释 型 视图 约束 条 件 更 多 ， 限 制 也 更 多 ， 同 时 也 更 容 
易 做 专 做 精 ， 而 且 主 要 用 于 传达 最 重要 的 信息 。D3 擅长 生成 解释 型 视图 ， 不 擅 
长 探索 型 视图 。( 要 了 解 与 D3 类 似 的 其 他 工具 ， 可 以 参考 本 章 2.4 节 。) 

D3 不 打算 支持 旧版 本 的 浏览 器 。 这 样 有 助 于 保持 D3 代码 库 的 干净 ， 避 免 为 支持 
诸如 旧版 Internet Explorer 而 加 入 太 多 的 偏 门 代 码 。 重 点 在 于 通过 创建 出 更 有 吸 
引力 的 工具 ,同时 拒绝 旧版 浏览 器 ,可 以 鼓励 更 多 用 户 升级 (而 不 是 延缓 这 一 进程 ， 
让 更 多 的 人 继续 使 用 那些 浏览 器 ， 然 后 再 延缓 ……… 如 此 恶性 循环 ) 。D3 希望 我 们 
大 家 问 前 看 。 

D3 的 核心 功能 不 处 理 像 谷 歌 地 图 或 Cloudmade 等 提供 的 那些 位 图 格式 的 地 图 贴 
片 。D3 最 擅长 处 理 矢量 图 形 (SVG 图 或 GeoJSON 数据 )， 从 一 开始 就 没有 打算 
支持 地 图 贴 片 。( 位 图 由 像素 构成 ， 很 难 在 放大 或 缩小 时 做 到 不 失真 。 矢 量 图 则 
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是 由 点 、 直 线 和 曲线 一 一 实际 上 是 数据 方程 式 一 一 定义 的 ， 因 此 可 以 随意 放大 
或 缩小 而 不 会 失真 .) 不 过 ， 事 情 现在 有 了 转机 ， 但 要 配合 使 用 d3.geo.tile 插件 
(http:Wtcn/zTINvoy)。 在 这 个 插件 问世 之 前 ， 通 过 D3 来 实现 地 图 映射 时 要 么 完 
全 依赖 SVG 而 不 用 贴 片 ， 要 么 得 通过 D3 在 地 图 贴 片 基层 上 面 创建 SVG 视觉 六 
果 (这 时 要 借助 其 他 库 ， 比 如 Leaflet 或 Polymaps， 有 具体 请 参见 本 章 2.4 节 )。 关 
于 如 何 集成 位 图 贴 片 和 矢量 图 形 ， 一 直 是 D3 社区 热 议 的 话题 。 到 今天 ， 也 没有 
出 现 很 简单 很 完美 的 方案 。 不 过 我 相信 ， 这 一 块 肯定 会 有 一 些 突破 ， 或 许 未 来 革 
一 天 ，D3 核心 会 加 入 一 些 全 新 的 贴 片 处 理 方法 。 

。 D3 不 隐藏 你 的 原始 数据 。D3 代码 在 客户 端 执 行 (也 就 是 在 用 户 浏 览 器 ， 而 不 
是 Web 服务 器 中 执行 )， 因 此 你 想 要 可 视 化 的 数据 必须 发 送 到 客户 端 。 假 如 你 的 
数据 不 能 共享 ， 就 不 要 使 用 D3 了 。 替 代 方 案 是 使 用 专 有 工具 (如 Flash)， 或 将 
可 视 化 结果 预先 泻 染 为 静态 图 片 ， 然 后 再 发 送 到 浏览 器 。( 如 果 你 不 想 共 享 数 据 ， 
那 为 什么 还 要 把 它们 可 视 化 呢 ? 可 视 化 的 目的 就 是 为 了 更 好 地 表现 数据 ， 与 其 可 
视 化 了 之 后 担心 得 睡 不 着 觉 ， 还 不 如 一 开始 就 公开 化 和 透明 化 。) 


| 已 
2.3 ”起 源 与 背景 
第 一 个 浏览 器 只 能 渲染 静态 页 面 ， 所 谓 交 互 性 仅 限 于 单 击 链 接 。1996 年 ，Netscape 
在 浏览 器 中 内 置 了 JavaScript 解释 器 ， 从 而 让 浏览 器 在 加 载 页 面 时 ， 能 够 解释 执行 
这 门 脚本 语言 编写 的 代码 。 


这 个 举措 并 没有 它 后 来 引发 的 巨变 那么 惊 心 动 饮 ， 但 却 让 浏览 器 从 被 动 的 显示 ， 进 
入 了 交互 在 线 处 理 动态 画面 的 新 时 代 。 这 一 历史 性 转变 成 就 了 我 们 今天 的 页 面 内 交 
互 的 Web。 如 果 没 有 JavaScript， 就 不 会 有 D3， 而 基于 Web 的 数据 可 视 化 也 只 能 
局 限于 提前 生成 好 的 、 不 具备 响应 能 力 的 GIF 图 。( 噢 …… 谢 谢 ，Netscape ! ) 























历史 的 车 轮 前 进 到 了 2005 年 ， 这 一 年 Jeffrey Heer、Stuart Card 和 James Landay 推出 
prefuse (http://prefuse.org/)， 一 个 通过 Web 呈现 的 数据 可 视 化 工具 包 。prefuse (字母 
全 部 小 写 ) 是 用 Java 写 的 ， 那 是 一 种 编译 型 语言 ， 而 且 可 视 化 程序 要 在 浏览 器 中 通过 
Java 插件 运行 。( 注 意 ，Java 和 JavaScript 是 完全 不 一 样 的 语言 ， 尽 管 名 字 上 类 似 。) 
prefuse 是 当时 一 个 突破 性 的 应 用 ， 它 首次 让 没有 多 少 经 验 的 编程 人 员 ， 能 够 实现 基于 
Web 的 可 视 化 展示 。 有 了 prefuse 之 后 ，Web 上 的 数据 可 视 化 就 成 了 小 事 一 桩 。 























两 年 后 ，Jeff Heer 又 推出 了 Flare (http://flare.prefuse.org/)。 这 是 一 个 类 似 的 工具 包 ， 
编程 语言 是 ActionScript， 就 是 说 可 以 通过 训 览 器 中 的 Flash Player 来 查看 可 视 化 结 
果 。 与 prefuse 类 似 ，Flare 也 依赖 浏览 器 插件 。Flare 虽然 是 一 个 巨大 的 进步 ， 但 随 
着 浏览 器 的 发 展 ， 可 视 化 显然 不 通过 插件 (而 只 利用 浏览 器 原生 特性 ) 也 能 实现 了 。 
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2009 年 ，Jeff Heer 搬 到 斯 坦 福 。 在 那里 ， 他 说 服 一 位 刚 毕业 的 学 生 Mike Bostock， 
共同 在 斯 坦 福 的 Vis Group (http://vis.stanford.edu/) 开 发 了 Protovis (http:// 
mbostock.github.io/d3/tutorial/protovis.html) ， 那 是 一 个 基于 JavaScript 的 可 视 化 工 
具 包 ， 只 依赖 原生 的 浏览 器 技术 。( 如 果 你 用 过 Protovis， 一 定 要 参考 Mike 的 这 篇 
“For Protovis Users”， 网 址 : http:/mbostock.github.com/d3/tutorial/protovis.html。 ) 


Protovis 简化 了 生成 可 视 化 图 形 的 工作 ， 即 使 是 没有 编程 经 验 的 人 都 可 以 上 手 。 但 
它 要 借助 一 个 抽象 的 表现 层 ， 尽 管 设 计 师 可 以 使 用 Protovis 语法 来 控制 这 一 层 ， 可 
调试 很 不 方便 ， 因 为 使 用 的 不 是 标准 方法 。 

2011 年 ，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 正式 推出 D3 (http://vis. 
stanford.edu/papers/d3 ) ， 作 为 下 一 代 Web 可 视 化 工具 。 与 Protovis 不 同 的 是 ，D3 
直接 操作 网 页 文档 。 因 此 ， 调 试 就 方便 了 ， 尝 试 不 同 的 方案 也 更 容易 ， 而 且 展 示 视 
觉 效 果 的 可 能 性 也 更 多 了 。 唯 一 的 缺点 是 学 习 门 槛 有 点 高 ， 不 过 本 书 会 尽 可 能 解决 
这 个 问题 。 此 外 ， 你 通过 学 习 D3 掌握 的 所 有 技术 ， 即 使 在 数据 可 视 化 这 个 领域 之 
外 ， 也 将 是 非常 有 用 的 。 


无 论 你 熟悉 上 面 提 到 的 任何 一 个 突破 性 的 工具 ， 一 定 都 会 认可 D3 纯正 的 血统 。 
如 果 你 对 D3 底层 的 设计 思想 感 兴趣 ， 强 烈 建议 你 看 一 看 Mike、Vadim 和 Jeff 
在 InfoVis 上 发 表 的 论文 “D’ : Data-Driven Documents” (http://vis.stanford.edu/ 
files/2011-D3-InfoVis.pdf)， 其 中 清晰 地 分 析 了 这 种 工具 的 必要 性 。 这 篇 论文 浓缩 了 
他 们 在 学 习 和 开发 可 视 化 工具 几 年 间 的 心血 。 


2.4 和 蔡 代 方案 

D3 也 不 是 适合 所 有 项 目 。 有 时 候 ， 可 能 你 只 想 马 上 生成 一 张 图 表 ， 没 有 时 间 自 己 编 
写 代码 。 或 者 ， 你 想 支持 旧版 本 浏览 器 ， 因 此 不 能 依赖 于 SVG 等 较 新 的 技术 。 

在 这 种 情况 下 ， 最 好 是 知道 还 有 其 他 什么 选择 。 以 下 我 就 来 简单 介绍 一 下 D3 的 
部 分 替代 方案 ， 也 许 不 全 ， 但 它们 的 共同 特点 是 都 采用 了 Web 标准 技术 (主要 是 
JavaScript) ， 而 且 可 以 免费 下 载 使 用 。 























2.4.1 简易 图 表 

。 DataWrapper 
一 个 非常 漂亮 的 在 线 服务 ， 上 传 数据 并 快速 生成 图 表 后 ， 就 可 以 到 处 使 用 或 将 其 
杠 入 在 自己 的 站 点 中 。 这 个 服务 最 初 定位 于 专栏 记者 ， 而 实际 上 任何 人 都 可 以 使 
用 。DataWrapper 在 新 版 本 浏览 器 中 可 以 显示 动态 图 表 ， 而 在 旧版 本 浏览 器 中 则 
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显示 静态 图 片 。( 太 聪明 了 ! ) 你 也 可 以 下 载 代码 在 自己 的 服务 器 上 运行 。 地 址 : 
http://datawrapper.de/。 








Flot 

一 个 基于 jQuery 的 绘图 库 ， 使 用 HTML 的 canvas 元 素 ， 也 支持 旧版 本 浏览 器 
(其 至 下 6)。 它 支持 有 限 的 视觉 形式 (折线 、 散 点 、 条 形 、 面 积 )， 但 使 用 很 简 
单 。 地 址 : http://www.flotcharts.org/。 





Google Chart Tools 
由 早期 的 Inage Charts API 发 展 而 来 的 Google Chart Tools， 可 以 用 来 生成 不 少 
标准 的 图 表 ， 也 支持 旧版 本 的 正 。 地 址 : https://developers.google.com/chart/。 


SRaphagl 
基于 Raphagl (参见 本 市 后 面 ) 的 一 个 图 表 库 ， 支 持 旧 版 本 浏览 器 (包括 IE6)。 与 
Flot 相 比 ， 它 更 灵活 ， 而 且 据 说 还 要 更 漂亮 一 些 。 地 址 : http://g.raphaeljs.com/。 





Highcharts JS 

JavaScript 图 表 库 ， 包 含 一 些 预 定义 的 主题 和 图 表 。 它 在 最 新 浏览 器 中 使 用 SVG， 
而 在 旧版 本 I 开 (包括 IE6 及 更 新 版 本 ) 中 使 用 后 备 的 VML。 这 个 工具 只 对 非 商 
业 用 途 免 费 。 地 址 : http://www.highcharts.com/。 





JavaScript InfoVis Toolkit 

简称 IT， 它 提供 了 一 些 预 设 的 样式 可 用 于 展示 不 同 的 数据 ， 包 括 很 多 例子 ， 而 
文档 的 技术 味道 大 浓 。 如 果 你 喜欢 它 的 预 设 样式 ， 可 以 选择 它 ， 但 浏览 器 支持 情 
况 不 太 清 楚 。 地 址 : http://philogb.github.com/jit/。 





JqPlot 
jQuery 绘图 插件 ， 只 支持 一 些 简单 的 图 表 ， 适 合 不 需要 自 定义 样式 的 情况 。jqPlot 
支持 IE7 及 更 新 版 本 。 地 址 : http://www.jqplot.com/。 





JQuery Sparklines 

可 生成 波形 图 的 jQuery 插件 ， 主 要 是 那些 可 以 风 在 字里行间 的 小 条 形 图 、 折 线 
图 、 面 积 图 。 支 持 大 多 数 浏览 器 ， 包 括 卫 6。 地 址 : http://omnipotent.net/jquery. 
sparkline/#s-about。 








Peity 

jQuery 插件 ， 可 生成 非常 小 的 条 形 图 、 折 线 图 和 人 饼 图 ， 只 支持 较 新 版 本 的 浏览 
器 。 再 强调 一 遍 ， 它 能 生成 非常 小 又 非常 精致 的 小 型 可 视 化 图 表 ， 可 爱 程度 加 10 
分 。 地 址 : http://benpickles.github.com/peity/。 
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Timeline.js 

专门 用 于 生成 交互 式 时 间 线 的 一 个 库 。 不 用 编写 代码 ， 只 用 其 代码 生成 器 即 可 。 
定制 的 空间 不 大 ， 但 时 间 线 可 不 是 那么 容易 做 的 。Timeline.js 只 支持 IE8 及 之 后 
的 版 本 。 地 址 : http://timeline.verite.co/。 





YUI Charts 
雅虎 YUI (Yahoo! User Interface Library) 的 Charts 模块 ， 可 用 于 创建 简单 的 图 
表 ， 支 持 很 多 浏览 器 。 地 址 : http://yuilibrary.com/yui/docs/charts/。 


2.4.2 ”图 谱 可 视 化 
所 请 “图 谱 ”， 就 是 上 共有 网 络 结构 的 数据 (比如 B 连接 到 A，A 连接 到 C)。 


Arbor.js 

基于 jQuery 的 图 谱 可 视 化 库 。 就 算 没 用 过 它 ， 也 该 看 一 看 它 的 文档 ， 连 它 的 文 
档 都 是 用 这 个 工具 生成 的 (可见 它 有 多 纯粹 、 多 meta)。 这 个 库 使 用 了 HTML 的 
canvas 元 素 ， 因 此 只 支持 IE9 和 其 他 较 新 的 浏览 器 ， 当 然 也 有 一 些 针对 旧版 浏 
览 器 的 后 备 措施 。 地 址 : http://arborjs.org/。 














Sigma.js 

一 个 非常 轻 量 级 的 图 谱 可 视 化 库 。 无 论 如 何 ， 你 得 看 看 它 的 网 站 ， 在 页 面 上 方 的 
大 图 上 晃 儿 下 鼠标 ， 然 后 再 看 看 它 的 演示 。Sigma.js 很 漂亮 ， 速 度 也 快 ， 同 样 使 
用 canvas。 地 址 : http://sigmajs.org/。 














2.4.3 地 图 映射 

我 们 要 区 分 一 下 地 图 (全 部 内 容 都 是 地 图 ) 和 地 图 映射 (包括 地 理 位 置 数据 或 地 理 
数据 ， 比 如 传统 的 地 图 )。D3 本 身 也 有 很 多 地 图 映射 功能 ， 但 下 面 这 些 工具 最 好 你 
也 了 解 一 下 








Kartograph 

Gregor Aisch 开发 的 一 个 基于 JavaScript 和 Python 的 非常 炫 的 、 完 全 使 用 矢量 的 
库 ， 它 的 演示 是 必 看 的 。 最 好 现在 就 去 看 一 看 。 保 证 你 从 来 没 见 过 这 么 漂亮 的 在 
线 地 图 。Kartograph 支持 IE7 及 更 新 版 本 。 地 址 : http://kartograph.org/。 














Leaflet 

贴 片 地 图 的 库 ， we len 它 支 持 在 地 图 贴 片上 显 
示 一 些 SVG 数据 层 。( 参 见 Mike 的 演示 “Using D3 with Leaflet”: http://bost. 
ocks.org/mike/leaflet/。) Leaflet 支持 IE6 (勉强 ) 或 IE7 (好 得 多 )， 当 然 还 有 其 
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他 更 新 版 本 的 浏览 器 。 地 址 : http://leafletjs.com/。 


Modest Maps 

作为 贴 片 地 图 库 中 的 老爷 和 公 ，Modest Maps 已 经 被 Polymaps 取代 了 ， 但 很 多 人 还 是 
喜欢 它 ， 因 为 它 体积 小 巧 ， 又 支持 下 和 其 他 浏览 器 的 老 版 本 。Modest Maps 有 很 多 
版 本 ， 包 括 ActionScript、Processing、Python、PHP、Cinder、openFrameworks……: 
总 之 ， 它 属于 老 当 益 壮 那 种 。 地 址 : http://modestmaps.com/。 








Polymaps 
显示 贴 片 地 图 的 库 ， 在 贴 片 上 可 以 且 加 数据 层 。Polymaps 依赖 于 SVG， 因 此 在 
较 新 的 浏览 器 中 表现 很 好 。 地 址 : http://polymaps.org/。 








2.4.4” 较 原始 的 方案 
以 下 工具 跟 D3 有 些 类 似 ， 都 提供 了 绘制 图 形 的 方法 ， 但 没有 预定 义 的 模板 。 如 果 
你 愿意 从 头 开始 ， 希 望 得 到 更 大 的 自由 度 ， 可 能 会 对 它们 感 兴趣 。 


Processing.js 

Processing 的 原生 JavaScript 实现 ， 是 新 接触 编程 的 艺术 家 和 设计 师 的 梦幻 式 
编程 语言 。Processing 是 Java 写 的 ， 因 此 Processing 草图 要 在 网 页 中 显示 通常 
要 靠 Java 小 程序 。 有 了 Processing.js， 常 规 的 Processing 代码 就 可 以 在 浏览 器 
中 直接 运行 了 。 由 于 使 用 canvas， 所 以 只 适合 现代 的 浏览 器 。 地 址 : http:// 


processingjs.org/。 














Paper.js 
在 canavs 上 演 染 矢量 图 形 的 框架 。 同 样 ， 它 的 网 站 也 堪 称 互联 网 上 最 漂亮 的 网 
站 之 一 ， 它 们 的 演示 做 得 让 人 难以 置信 。( 现 在 就 去 欣赏 一 下 吧 。) 地 址 : http:// 


paperjs.org/。 





了 Raphagl 
也 是 一 个 绘制 矢量 图 形 的 库 ， 受 欢迎 的 原因 是 语法 具有 亲和力 ， 而 且 支 持 老 版 本 


lI De 


浏览 器 。 地 址 : http://raphaeljs.com/。 


2.4.5 三维 图 形 
说 来 也 怪 ，D3 不 擅长 3D， 因 为 浏览 器 从 一 开始 就 是 二 维 的 东西 。 但 随 着 它 对 
WebGL 的 支持 越 来 越 完善 ， 在 网 页 中 显示 3D 图 形 也 会 渐渐 成 为 一 种 趋势 。 








PhiloGL 
专注 于 3D 可 视 化 的 一 个 WebGL 框架 。 地 址 : http:Wwww.senchalabs.org/philogl/。 
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Three.js 
能 帮 你 生成 任何 3D 场景 的 一 个 库 ， 谷 歌 Data Arts 团队 出 品 。 它 的 演示 可 以 让 人 
整整 一 天 都 沉浸 其 中 ， 兴 奋 不 已 。 地 址 : http://mrdoob.github.com/three.js/。 








2.4.6 基于 D3 的 工具 
如 果 你 使 用 D3， 但 又 不 想 写 代码 ， 可 以 考虑 下 面 这 些 基 于 D3 的 工具 。 


Crossfilter 
一 个 可 以 操作 大 型 、 多 元 数据 集 的 库 ， 主 要 作者 是 Mike Bostock。 非 常 适合 
把 你 的 “大 数据 ” 塞 到 相对 小 的 浏览 器 里 ， 地 址 : http://square.github.com/ 


crossfilter/。 


Cubism 
时 间 序 列 数 据 可 视 化 的 D3 插件 ， 也 是 Mike Bostock 写 的 。( 我 非常 喜欢 其 中 的 
演示 。) 地 址 : http://square.github.com/cubism/。 


Dashku 
用 于 实时 更 新 在 线 控制 板 和 小 部 件 的 在 线 工具 ， 作 者 是 Paul Jensen。 地 址 : 
https://dashku.com/。 


dc.js 
这 里 的 “dc” 是 dimensional charting (维度 图 表 ) 的 简写 ， 因 为 这 个 库 是 专门 为 
探索 大 型 、 多 维 数据 集 而 进行 优化 的 。 地 址 : http://nickqizhu.github.com/dce.js/。 





NVD3 
可 重用 的 D3 图 表 。NVD3 提供 了 很 多 漂亮 的 示例 ， 不 用 像 在 D3 里 那样 编写 代 
码 就 可 以 定制 很 多 效果 。 地 址 : http://nvd3.org/。 





Polychart.js 
更 多 可 重用 的 图 表 ， 可 选择 的 图 表 类 型 非常 之 多 。Polychart.js 只 对 非 商业 用 途 免 
费 。 地 址 : http://polychart.com/。 


Rickshaw 
显示 时 间 序 列 数据 的 一 个 工具 包 ， 提 供 了 很 多 定制 选项 。 地 址 : http://code. 


shutterstock.com/rickshaw/。 


Tributary 
实时 测试 D3 代码 的 一 个 好 工具 ， 作 者 是 Ian Johnson。 地 址 : http://tributary.io/。 
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技术 基础 





本 章 将 介绍 一 些 相 关 的 基本 概念 ， 熟 悉 这 些 概念 对 擎 握 D3 大 有 神 益 ， 当 然 也 能 减 
少 挫折 感 。 咽 ， 就 当 本 章 是 一 个 Web 开发 的 入 门 教程 吧 。 





请 大 家 留意 一 下 ， 本 章 的 知识 密度 很 高 ， 浓 缩 了 多 年 来 形成 的 Web 开发 知 
一 CS》 识 , 而 且 都 不 是 专门 针对 D3 的 。 建 议 大 家 只 检 那 些 自己 不 知道 的 内 容 看 ， 
其 他 的 可 以 跳 过 。 到 后 面 再 遇 到 什么 问题 时 ， 可 以 再 回来 。 


k 





















































3.1 Web (万 维 网 ) 

如 果 你 从 来 没 做 过 网 页 ， 那 现在 必须 得 想 一 想 平 常人 大 都 不 届 一 顾 的 一 个 问题 了 : 
Web 的 原理 是 什么 ? 

我 们 一 般 把 Web 看 成 一 堆 内 部 相互 链接 的 页 面 ， 而 实际 上 它 是 服务 器 与 客户 端 〈 训 
览 器 ) 之 间 你 来 我 往 的 对 话 。 

如 果 你 单 击 了 一 个 链接 或 者 在 浏览 器 地 址 栏 输入 了 一 个 网 站 ， 那 么 就 会 出 现下 面 这 
个 场景 (这 个 场景 每 天 都 要 上 演 无 数 次 ) : 





客户 韶 : 我 想 知 道 sSomewebsite.com 上 有 什么 ,去 登门 造访 一 下 吧 ， 看 看 有 什 
么 新 消息 。[ 互 联网 连接 静 静 地 建立 起 来 ] 

服务 器 : 你 好 ， 新 来 的 Web 客 户 端 !| 我 是 托管 Somewebsite.com 的 服务 器 。 你 
想 看 哪个 页 面 ? 


客户 痛 : 现在 还 早 ， 我 想 看 一 看 somewebsite.com/mews/ 下 面 的 页 面 中 有 什么 新 闻 。 

服务 器 : 没 问 题 ， 稍 等 。 

(一 串 数字 代码 从 服务 器 传输 到 浏览 器 。) 

客户 痛 : 收 到 了 。 谢 谢 | 

服务 器 : 不 客气 ! 我 非常 愿意 跟 您 在 线 多 聊 一 会 儿 ， 不 巧 又 来 新 请 求 了 。 再 见 | 
客户 端 连接 到 服务 器 并 发 送 请 求 ， 而 服务 器 响应 数据 。 可 到 底 什 么 是 服务 器 ， 什 么 
是 客户 端 ? 
服务 器 是 连 在 互联 网 上 的 计算 机 ， 运 行 着 Web 服务 器 软件 。 之 所 以 称 其 为 Web 服 
务 器 ， 正 是 因为 它们 会 根据 请 求 来 提供 网 页 ， 像 个 服务 员 似 的 。 服 务 器 一 般 24 小 时 
运行 ， 而 且 永 远 在 线 。 有 时 候 ，Web 开发 人 员 也 会 在 本 地 计算 机 上 运行 Web 服务 
器 软件 ， 当 然 你 也 可 以 。 本 地 是 什么 意思 ? 就 是 你 这 台电 脑 啊 ， 远 程 指 就 是 其 他 电 
脑 ， 或 者 说 除了 你 眼前 这 台电 脑 之 外 的 其 他 电脑 。 
有 很 多 现成 的 服务 器 软件 ， 比 如 Apache。Web 服务 器 软件 可 没 那 么 好 看 ， 也 没 人 愿 
意 看 。 
相对 而 言 ，Web 浏览 器 就 赏心悦目 多 了 ， 我 们 每 天 都 盯 着 它 看 个 没完 。 大 家 一 般 都 
听 说 过 Firefox、Safari、Chrome， 还 有 Internet Explorer， 这 些 都 是 浏览 器 ， 也 就 是 
客户 端 。 








理论 上 讲 ， 每 个 网 页 都 有 一 个 唯一 的 URL (Uniform Resource Locator， 统 一 资源 
定位 符 ) ， 也 叫 URI ((Uniform Resource Identifier， 统 一 资源 标识 符 ) 。 大 多 数 人 不 
知道 URL 是 怎么 回 事 ， 但 看 见 就 能 认 出 来 。URL 一 般 以 www 开头 ， 比 如 http:// 
www:calmingmanatee.com。 但 服务 器 如 果 做 过 配置 ， 那 么 “www.” 这 几 个 字符 完 
全 可 以 省 掉 不 写 。 


完整 的 URL 由 以 下 4 部 分 构成 : 








通信 协议 ， 如 HTTP 或 HTTPS; 
资源 所 在 的 域名 ， 如 calmingmanatee.com; 

。 端口 号 ， 表 示 要 连接 到 服务 器 的 哪个 端口 上 ， 

。 其 他 定位 信息 ， 如 所 请 求 文件 的 路 径 或 查询 参数 。 


于 是 ,一 个 比较 完整 的 URL 就 是 这 个 样子 的 : http://alignedleft.com:80/tutorials/d3/。 





平时 一 般 不 用 指定 端口 号 ， 因 为 浏览 器 默认 会 连接 服务 器 的 80 端口 。 因 此 ， 前 面 的 
URL 与 下 面 这 个 功能 完全 一 样 : http://alignedleft.com/tutorials/d3/。 
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URL 开头 的 协议 名 跟 后 面 的 域名 之 间 是 一 个 冒号 和 两 个 斜 枉 。 为 什么 是 两 个 斜 枉 ? 没 
有 为 什么 ， 这 就 么 规定 的 。 可 以 算 个 失误 吧 ，Web 的 发 明 人 也 为 这 个 失误 后 悔 不 迭 。 





HTTP 代表 Hypertext Transfer Protocol ( 超 文本 传输 协议 )， 是 服务 器 与 客户 端 之 
间 传 输 Web 内 容 最 常用 的 协议 。HTTPS 后 面 的 “S” 代 表 Secure (安全 )。 因 此 ， 
HTTPS 一 般 用 于 传输 加 密 信息 ， 比 如 在 线 交 易 或 电子 商务 。 


下 面 我 们 简单 描述 一 个 人 访问 某 个 站 点 时 的 过 程 。 


. 用 户 打 开 自 己 的 浏览 器 ， 在 地 址 栏 中 输入 URL， 例 如 alignedleft.com/tutorials/ 
d3/。 因 为 没有 指定 协议 ， 所 以 浏览 器 会 使 用 默认 的 HTTP 协议 ， 在 URL 前 面 补 
上 “http://”。 

. 浏览 器 尝试 通过 互联 网 连接 alignedleft.com 所 在 的 服务 器 ， 连 接 其 80 端口 (这 
是 HTTP 连接 的 默认 端口 )。 

. 与 alignedleft.com 关联 的 服务 器 同意 连接 ， 并 准备 接收 浏览 器 的 请 求 。(“ 我 会 等 
你 一 晚上 ， 不 见 不 散 。”) 

. 浏览 器 请 求 访问 位 于 目录 /tutorials/d3/ 下 的 页 面 。 

. 服务 器 把 那个 页 面 的 HTML 内 容 发 给 浏览 器 。 

. 浏览 器 收 到 HTML 后 ， 根 据 其 中 引用 的 其 他 文件 (包括 CSS 样式 表 和 图 片 ) 再 
聚合 并 显示 出 完整 的 页 面 。 为 此 它 还 要 再 连接 到 同一 台 服 务 器 ， 每 次 请 求 并 取得 
一 个 文件 。 





和 三 


MD 


(LD 


上 


QO (LAn 




















7. 服务 器 响应 ， 根 据 请 求 发 回 每 个 文件 。 
8. 网 页 文档 传输 完毕 。 浏 览 器 履行 它 最 费劲 的 职责 一 一 泻 染 内 容 。 首 先 通 过 解析 
HTML 确定 内 容 的 结构 ， 然 后 根据 CSS 选择 符 为 匹配 的 元 素 应 用 样式 ， 最 后 把 





图 片 插入 到 页 面 中 ， 并 执行 JavaScript 代码 。 


或 许 你 不 慑 相信 ， 每 单 击 一 次 链接 都 会 经 历 上 述 步骤 。 这 些 步骤 比 大 多 数 人 想象 的 
要 复杂 ， 但 却 是 理解 客户 端 /服务 器 对 话 的 基础 ， 也 是 理解 Web 运行 原理 的 基础 。 


3.2 HTML 


HTML (Hypertext Markup Language， 超 文本 标记 语言 ) 用 于 向 浏览 器 说 明 内 容 
的 结构 。HTML 保存 在 以 .html 为 扩展 名 的 纯 文本 文件 中 。 下 面 就 是 一 个 简单 的 
HTML 文档 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>page Title</title> 
</head> 
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<body> 
<hl>pPage Title</h1l> 


<p>This is a really interesting paragraph.</p> 
</body> 
</html> 


HTML 本 身 不 算 简 单 ， 历 史 也 比较 和 悠久。 本 节 只 介绍 HTML 的 最 新 版 本 (正式 称呼 
叫 HTML5)， 而 且 只 介绍 那些 与 D3 相关 的 内 容 。 


3.2.1 内容 和 结构 
HTML 的 核心 功能 就 是 让 你 “标记 ”内 容 ， 进 而 给 出 结构 。 比 如 下 面 这 段 文本 


Amazing Visualization Tool Cures All llls A new open-source tool designed for 
visualization of data turns out to have an Unexpected, positive side effect: it heals 
any ailments of the viewer. Leading Scientists report that the tool, called D3000, 
can cure even the following symptoms: fevers chills general malaise It achieves 
this end with a patented, three-step process. Load in data. Generate a visual 
representation. Activate magic healing function. 


只 要 读 上 两 行 ， 就 能 知道 这 是 一 个 很 激动 人 心 的 新 闻 报道 。 可 由 于 内 容 没有 分 出 结构 
来 ， 所 以 读 起 来 很 费劲 。 而 添加 了 结构 之 后 ， 就 可 以 区 分 哪里 是 标题 ， 哪 里 是 正文 。 





Amazing Visualization Tool Cures All Ils 
A new open-source tool designed for visualization of data turns out to have an 
unexpected, positive side effect: it heals any ailments of the viewer. Leading 


Scientists report that the tool, called D3000, can cure even the following symptoms: 


。 fevers 
。 chills 


。 general malaise 


It achieves this end with a patented, three-step process. 
1. Load in data. 
2. Generate a visual representation. 


3. Activate magic healing function. 


文字 还 是 那些 文字 ， 但 加 上 结构 之 后 ， 可 读 性 就 不 一 样 了 。 





HTML 就 是 为 内 容 添 加 语义 结构 (或 者 说 层次 、 关 系 和 含义 ) 的 这 么 一 种 手段 。 
(HTML 不 考虑 文档 的 外 观 ， 那 是 CSS 的 事 。) 如 果 把 上 面 分 出 结构 的 内 容 用 语义 来 
描述 ， 就 是 下 面 这 样 。 
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箱 3 重 


标题 
段落 文本 
。 无 序列 表 项 


。 无 序列 表 项 
。 无 序列 表 项 


段落 文本 
1. 有 序列 表 项 


2. 有 序列 表 项 
3. 有 序列 表 项 


这 就 是 我 们 通过 HTML 标记 给 内 容 添加 的 结构 。 


3.2.2 ”通过 元 素来 添加 结构 
所 谓 “ 标 记 ”， 就 是 通过 给 内 容 添 加 标签 来 创建 元 素 的 过 程 。HTML 标签 以 < 开头 ， 
以 > 结束 ， 比 如 表示 段落 文本 的 zp>。 标 签 一 般 都 成 对 出 现 ， 一 个 开始 标签 和 一 个 
结束 标签 就 在 文档 中 创建 了 一 个 元 素 。 


结束 标签 用 一 个 斜 杠 表示 元 素 的 关闭 或 结束 ， 比 如 </p>。 如 果 要 标记 一 个 段落 元 
素 ， 那 么 可 以 像 下 面 这 样 写 : 











<p>This is a really interesting paragraph.</p> 
有 些 元 素 是 可 以 般 套 的 。 比 如 ， 可 以 使 用 em 元 素 为 文本 增加 强调 的 语义 。 
<p>This is a <em>really</em> interesting paragraph.</p> 


岁 套 元 素 在 文档 中 会 形成 层次 。 对 上 面 的 例子 而 言 ，em 就 是 p 的 子 元 素 ， 因 为 它 被 
p 包含 着 。( 相 应 地 ，p 是 em 的 父 元 素 。) 


在 元 素 相 互 嵌 套 的 时 候 ， 子 元 素 不 能 超出 父 元 素 之 外 ， 因 为 这 样 就 会 破坏 层次 ， 比 如 : 





<p>This could cause <em>unexpected</p> 
<p>results</em>, and is best avoided.</p> 


有 些 标签 永远 不 会 成 对 出 现 ， 比 如 指向 一 张 图 片 的 img。 虽 然 HTMLS5 不 再 强制 要 
求 ， 但 你 经 常 也 会 看 到 这 种 标签 的 自 关闭 写法 ， 也 就 是 在 末尾 的 > 之 前 加 一 个 斜 杠 : 





<img src="photo.jpg" /> 


HTML5 之 后 ， 这 种 自 关闭 的 标签 就 变 成 了 可 选 的 ， 因 此 下 面 的 代码 跟前 面 的 代码 
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<img src="photo.jpg"> 


3.2.3 ”常用 元 素 


HTML 有 上 百 个 元 素 ， 我 们 只 介绍 最 常用 的 。 后 续 音 市 还 会 介绍 其 他 一 些 元 素 。 
(要 了 解 所 有 HTML 元 素 ， 请 参考 全 面 的 Mozilla Developer Network， 网 址 : https:// 
developer.mozilla.org/en/HTML/Element, ) 


。 <!IDOCTYPE html> 
这 是 标准 的 文档 类 型 声明 ， 必 须 在 文档 的 第 一 行 。 








。 html 
包含 文档 中 的 所 有 HTML 内 容 。 
。 head 


文档 的 头 部 ， 包 含 所 有 文档 的 元 数据 。 比 如 标题 和 对 外 部 样式 表 、 脚 本 的 引用 。 


。 title 
文档 的 标题 。 浏 览 器 会 把 这 个 元 素 的 内 容 显示 在 窗口 标题 栏 中 ， 并 在 收藏 网 页 时 
使 用 这 个 标题 。 





。 body 
所 有 不 包含 在 nead 中 的 内 容 ， 都 包含 在 body 中 。 这 里 面 的 内 容 是 可 以 在 网 页 
中 看 到 的 。 








® hl, li2, 13, 4 

用 于 标记 不 同 级 别 的 标题 。hi 代表 顶级 标题 ，h2 代表 二 级 标题 ， 依 此 类 推 。 
°° P 

段落 ! 
并、 ls 114 


ul 用 于 标记 无 序列 表 ， 也 就 是 带 项 目 符号 的 列表 。ol 用 于 标记 有 序列 表 ， 也 就 
是 带 编号 的 列表 。ul 和 ol 都 包含 1i 元 素 ， 用 于 标记 列表 项 。 


Em 


表示 强调 役 显 示 为 斜体 。 


“SEOngS 


表示 额外 强调 ， 一 般 显 示 为 粗 体 。 
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a 


链接 。 一 般 显示 为 带 下 划 线 的 蓝 色 文本 ， 可 以 另行 设置 。 





。 span 


任意 文本 ， 一 般 都 包含 在 p 这 样 的 大 容器 元 素 中 。 


。 div 


任意 文本 块 。 用 于 分 组 相关 元 素 。 


我 们 


在 浏 


前 面 的 例子 就 是 使 用 这 些 元 素来 区 分 语义 结构 的 : 


<hl>Amazing Visualization Tool Cures All Ills</hl> 
<Pp>A new open-source tool designed for visualization of data turns out 
to have an unexpected, positive side effect: it heals any ailments of the 
Viewer. Leading scientists report that the tool, called D3000, can cure 
even the following symptoms:</p> 
<ul> 
<li>fevers</1i> 
<1li>chills</1i> 
<li>general malaise</1i> 
</ul> 
<p>It achieves this end with a patented, three-step process.</p> 
<ol> 
<li>Load in data.</1i> 
<1li>Generate a visual representation.</1i> 
<li>Activate magic healing function.</1i> 
</ol> 


览 器 中 打开 这 个 页 面 ， 可 以 看 到 如 图 3-1 所 示 的 结果 。 











Amazing Visualization Tool Cures All Ills 


A new open-source tool designed for visualization of data turns out to have positive an unexpected side 
effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even 
the following symptoms: 


® fevers 
e chills 
e general malaise 


It achieves this end with a patented, three-step process. 


1. Load in data. 
2. Generate a visual representation. 
3. Activate magic healing function. 








3- 
我 们 


大 小 、 


1: 简单 的 HTML 在 浏览 器 中 默认 的 效果 


到 现在 只 介绍 了 给 文档 标记 语义 结构 ， 还 没有 涉及 视觉 样式 ， 比 如 颜色 、 字 体 
缩 进 或 行 间 距 。 如 果 没 有 这 种 指令 ， 浏 览 器 就 会 使 用 默认 的 样式 。 当 然 ， 默 
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认 样 式 中 规 中 矩 ， 不 会 好 看 到 哪里 去 。 


3.2.4 属性 

可 以 为 任何 HTML 元 素 指定 一 些 属性 ， 形 式 如 下 (在 开始 标签 中 ) : 
< 标签 名 属性 =" 值 "></ 标签 名 > 

属性 名 后 面 是 等 于 号 ， 然 后 是 放 在 双 引 号 中 的 属性 值 。 


不 同 的 元 素 拥有 不 同 的 属性 。 比 如 ，a 是 一 个 链接 元 素 ， 有 href 属性 ， 这 个 属性 的 
值 就 是 链接 的 URL。(href 是 HTTP reference 的 简写 。) 

















<a href="http://d3js.org/">The D3 website</a> 


有 些 属性 可 以 指定 给 任何 元 素 ， 比 如 class 和 iq。 


3.2.5 ”类 和 ID 


class 和 id 是 最 有 用 的 两 个 属性 ， 因 为 通过 它们 可 以 找到 特定 的 内 容 。 而 且 ，CSS 
和 JavaScript 代码 也 依赖 它们 定位 元 素 。 比 如 : 
<p>Brilliant paragraph</p> 


<p>Insightful paragraph</p> 
<p class="awesome">Awe-inspiring paragraph</p> 


这 里 有 三 个 段落 ,但 只 有 一 个 真 “ 不 得 了 “(awesome)， 因 为 我 给 它 添加 了 class= 
"awesome" 属性 。 这 样 ， 第 三 段 就 归 到 了 “不 得 了 ”(awesome) 的 元 素 一 类 。 通 
过 这 个 类 ， 就 可 以 选择 并 操作 它 。( 稍 后 再 介绍 具体 做 法 。) 


可 以 给 一 个 元 素 指 定 多 个 类 ， 多 个 类 名 间 以 空格 分 隔 ;， 也 可 以 给 多 个 元 素 指定 一 个 类 : 














<p class="uplifting">Brilliant paragraph</p> 
<p class="uplifting">Insightful paragraph</p> 
<p class="uplifting awesome">Awe-inspiring paragraph</p> 


这 样 ， 所 有 三 个 段落 就 都 “ 令 人 振奋 ”(uplifting) 了 ,但 只 有 最 后 一 个 段落 既 
“ 令 人 振奋 ”又 “不 得 了 ”。 


ID 的 使 用 方法 类 似 ， 但 每 个 元 素 只 能 有 一 个 ID ， 而 且 这 个 ID 在 整个 页 面 中 也 只 能 
出 现 一 次 。 例 如 : 





<div id='"content"> 
<div id="visualization"></div> 
<div id="button"></div> 
</div> 
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在 某 个 元 素 比 较 特 殊 的 情况 下 ， 使 用 ID 比较 合适 。 比 如 ， 想 让 一 个 div 像 按 钮 一 
样 ， 或 者 作为 页 面 中 其 他 内 容 的 容器 。 

一 般 来 说 ， 如 果 页 面 中 只 有 这 么 一 个 元 素 ， 就 可 以 给 它 指定 id 属性 。 否 则 ， 就 使 
用 class 属性 。 








类 和 ID 的 值 不 能 以 数字 开头 ， 而 必须 以 字母 开头 。 比 如 ，id="1" 不 合 规 
TD 几 ,， 而 19-"itemi" 就 可 以 。 写 错 了 ， 浏 览 器 也 不 报错 ， 但 你 的 代码 就 
运行 不 了 了 。 为 了 找到 间 题 所 在 ， 恐 怕 都 得 疯 掉 。 














3.2.6 注释 

随 着 代码 越 来 越 多 ， 越 来 越 复杂 ， 最 好 的 做 法 是 添加 注释 。 注 释 就 是 你 描述 代码 用 
途 和 实现 方式 的 一 些 备 注 。 如 果 你 跟 我 一 样 ， 几 个 星期 之 后 才 会 重新 看 一 看 代码 ， 
那 很 可 能 早 就 忘 了 以 前 是 怎么 想 的 了 。 注 释 就 能 起 到 提醒 的 作用 ， 在 未 来 给 你 提供 


一 个 向 导 。 








HTML 中 的 注释 是 这 样 来 写 的 : 
<1l-- 这 里 是 注释 的 内 容 - 


位 于 <!-- 和 --> 之 间 的 内 容 都 会 被 浏览 器 忽略 掉 。 


3.3 DOM 


DOM (Document Object Model， 文档 对 象 模 型 ) 指 的 是 HTML 标签 的 层次 结构 。 
ee el 对 这 些 元 素 ， 我 们 一 般 
用 拟人 化 的 方法 来 称呼 它们 ， 比 如 : 父 元 素 、 子 元 素 、 同 胞 元 素 、 祖 先 元 素 和 后 代 
元 素 。 举 个 例子 ， 对 下 面 的 HTML 来 说 : 





<html> 
<body> 
<hl>Breaking News</h1L> 
<p></p> 
</body> 
</html> 


body 是 其 子 元 素 pl 和 jp 的 父 元 素 ， 而 pl 和 jp 则 互 为 同胞 元 素 。 页 面 中 的 所 有 元 
素 都 是 html 的 后 代 元 素 。 


浏览 器 通过 解析 DOM 来 操作 页 面 内 容 。 编 码 的 人 在 实现 可 视 化 时 ， 最 关心 的 是 
DOM。 因 为 我 们 的 代码 必须 在 DOM 层次 中 寻找 元 素 ， 然 后 为 它们 应 用 样式 和 行 
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为 。 如 果 不 想 让 所 有 div 元 素 都 显示 成 蓝 色 ， 那 就 必须 想 办 法 选择 class 为 sky 
的 aiv， 把 它们 设置 成 蓝 色 。 


3.4 开发 者 工具 
最 早 的 时 候 ，Web 开发 的 工作 流程 是 这 样 的 ; 


1. 在 文本 编辑 器 中 写 代 码 ， 

2. 保存 文件 ， 

3. 切换 到 浏览 器 ， 

4. 刷新 页 面 ， 看 代码 是 否 有 效 。 

5. 如 果 代 码 无 效 ， 猜 一 猜 是 哪 出 了 问题 ， 然 后 返回 第 1 步 。 


浏览 器 是 出 了 名 的 “ 密 不 透风 ”的 黑 盒 子 ， 其 请 染 引擎 怎么 工作 很 难 预测 ， 这 就 给 

代码 调试 带 来 了 无 尽 的 麻烦 。( 说 真 的 ，1999 年 年 底 2000 年 年 初 的 时 候 ， 我 就 因此 

烦 透 了 。) 好 在 ， 我 们 生活 在 一 个 文明 的 时 代 。 现 代 的 浏览 器 都 内 置 了 开发 者 工具 ， 
能 够 把 浏览 器 内 部 的 工作 过 程 展示 出 来 ， 让 我 们 看 到 后 台 的 秘密 。 


说 这 些 的 意思 就 是 告诉 大 家 ， 开 发 者 工具 十 分 重要 。 你 在 写 代码 的 时 候 ， 经 常 需要 
用 它 来 测试 代码 ， 而 在 遇 到 问题 时 ， 还 要 借助 它 找 到 原因 所 在 。 


下 面 我 们 就 介绍 开发 者 工具 的 一 个 最 简单 的 用 途 : 查看 HTML 页 面 的 源 代码 (参见 
图 3-2)。 











司 
@ee) Qiyview-source:localhost/book x ， 过 


名 | view-source:localhost/book/images/3/references/sim... Tr | A 








下 <hl>Amazing Visualization Tool Cures All Ills</hl> 

2| <p>A new open-source tool designed for visualization of 
| data turns out to have positive an Unexpected side effect: it 
heals any ailments of the viewer,. Leading scientists report that 
the tool, called D3000, can cure even the following symptoms:</p> 


3| <ul> 

4 <1i>fevers</1i> 

5| <li>chills</1i> 

下 | <li>general malaise</1i> 

7 </ul> 

8 <p>It achieves this end with a patented, three-step 
process.</p> 

9 <ol> 

认 <li>Load in data.</li> 

1 <li>Generate a visual representation.</1i> 

入 <li>Activate magic healing function.</li> 

| </ol> 








3-2: 在 新 窗口 中 查看 源 代码 
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所 有 浏览 器 都 支持 这 个 功能 ， 只 不 过 它们 可 能 会 把 这 个 选项 放 到 不 同 的 地 方 。 在 
Chrome 23.0 中 ,是 “工具 > 查看 源 代码 ”。 在 Firefox 17.0 中 ,是 “工具 > Web 开 
发 者 > 页 面 源 代码 ”。 在 Safari 6.0 中 ,是 “开发 > 显示 源 代 码 ”( 前 提 是 必须 在 
“Safari > 偏好 设置 > 高 级 ”中 ， 把 “开发 ” 沫 单 设 置 为 可 见 ) 。 接 下 来 ， 无 论 你 使 
用 什么 浏览 器 ， 我 都 假设 你 使 用 的 是 它 的 最 新 版 本 。 


如 图 3-2 所 示 ， 其 中 显示 了 HTML 源 代 码 。 如 果 有 D3 或 JavaScript 代码 执行 ， 那 
当前 DOM 就 会 大 不 相同 。 


好 在 浏览 器 的 开发 者 工具 可 以 帮 我 们 查看 DOM 的 当前 状态 。 同 样 ， 各 个 浏览 器 都 
提供 了 自己 的 开发 者 工具 。 在 Chrome 中 ， 可 以 在 “工具 > 开发 者 工具 ”中 找到 。 
在 Firefox 中 ， 可 以 试 试 “工具 > Web 开发 者 ”。 在 Safari 中 ， 首 先 要 启用 开发 者 
工具 (在 “偏好 设置 > 高 级 ”下 )， 然 后 ， 在 “开发 ” 葬 单 中 选择 “显示 Web 检查 
器 "。 在 任何 浏览 器 中 ， 都 可 以 使 用 相应 的 键盘 快捷 键 (就 在 前 面 提 到 的 菜单 项 旁边 
可 以 找到 ) ， 或 者 通过 右键 单 击 并 选择 “检查 元 素 ” 也 能 调 出 开发 者 工具 。 


直到 最 近 ，Safari 和 Chrome 使 用 的 都 是 相同 的 开发 者 工具 。 从 Safari 6.0 开始 ， 蕴 
果 完 全 重新 设计 了 自己 的 开发 工具 ， 但 让 粉丝 们 很 失望 。( 新 工具 非常 难 用 ， 而 且 有 
这 种 感觉 的 不 只 我 一 人 。) 无 论 你 使 用 什么 浏览 器 ， 无 论 你 的 界面 看 起 来 跟 我 这 个 屏 
幕 截图 有 多 不 一 样 ， 其 实 它 们 的 功能 都 非常 相近 。 


3-3 显示 了 Chrome 的 Web 检查 器 的 Elements (元 素 ) 选项 卡 。 在 这 里 ， 可 以 看 
到 DOM 的 当前 状态 。 因 为 我 们 的 代码 会 动态 修改 DOM 元 素 ， 所 以 这 个 选项 卡 非 
常 有 用 。 通 过 这 个 窗口 ， 可 以 随时 监控 元 素 的 变化 。 


仔细 看 一 看 ， 你 就 会 发 现 HTML 源 代 码 和 DOM 层次 的 区 别 。 而 且 ，Chrome 还 帮 
我 们 生成 了 必要 的 htm1 、head 和 body 元 素 。 (我 总 是 很 懒 ， 不 愿意 在 HTML 中 有 写 


这 些 标签 。) 




















还 有 一 点 ， 为 什么 我 只 讲 Chrome、Firefox 和 Safari 呢 ? 为 什么 不 提 正 、Opera 和 
其 他 浏览 器 呢 ?” 首 先 ， 最 好 使 用 对 Web 标准 支持 得 最 完善 的 浏览 器 。IE 虽然 从 第 9 
个 版 本 到 第 10 版 本 有 了 很 大 进步 ， 但 Chrome、Firefox 和 Safari 对 标准 的 支持 仍然 
是 最 好 的 ， 而 且 升级 很 频繁 。 


其 次 ， 我 们 得 经 常 使 用 开发 者 工具 ， 必 须 选 择 那些 工具 好 用 的 浏览 器 。 我 个 人 很 喜 
欢 Safari 6.0 之 前 的 开发 者 工具 ， 之 后 的 就 不 好 用 了 。 所 以 我 就 只 能 选择 Chrome 和 
Firefox 的 开发 者 工具 。 建 议 大 家 都 试 一 试 ， 选 择 一 个 最 适合 自己 的 。 
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Amazing Visualization Tool Cures All llls 


A new open-source tool designed for visualization of data turns out to have positive an unexpected side effect: it heals any 
ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms: 


| 








e fevers 
e chills 
e gencral malaise 


It achieves this end with a patented, three-step process. 
1. Load in data. 


2. Generate a visual representation. 
3. Activate magic healing function. 
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Vv<html> | Pp Computed Style DShow inherited 
<head></head> vsStyles 二 深交- 
Vv<body> 
<hi>Amazing Visualization Toot Cures ALL ILLs</h1> ee 
bb <p>.</p> 


关 <UL>-</uUL> 于 
<p>It achieves this end with a patented, three-step process,</p> | Matched CSS Rules 


je <0L>-,</olL> html { User agent stylesheet 
</body> display: block; 
</html> } 
Pp Metrics 
| 后 Properties 
| PDOM Breakpoints 
| ¥ Event Listeners YY 


,| EE eo 党 








3-3: Chrome 的 元 素 检 查 窗 口 


3.5 泻 染 与 盒 模型 
演 染 ， 就 是 浏览 器 在 解析 HTML 并 生成 DOM 后 ， 对 DOM 应 用 视觉 规则 并 将 像素 
绘制 到 屏幕 的 过 程 。 


要 知道 浏览 器 如 何 演 染 内 容 ， 最 重要 的 是 记 住 一 点 : 浏览 器 把 一 切 都 看 成 盒子 
(box)。p、div、span， 都 是 盒子 ， 因 为 它们 在 屏幕 这 个 二 维 空间 里 都 是 矩形 ， 具 
有 任何 矩形 的 特征 ， 如 宽度 、 高 度 、 位 置 。 就 算 有 些 元 素 看 起 来 有 圆 角 或 者 形状 不 
规划， 放心 ， 在 浏览 器 眼 里 ， 它 们 也 都 是 一 个 个 的 矩形 盒子 。 


不 相信 ? 在 Web 检查 器 的 帮助 下 ， 你 可 以 看 到 这 个 盒子 。 只 要 把 鼠标 移动 到 任意 元 
素 上 ， 与 之 对 应 的 盒子 就 会 高 亮 显 示 出 来 ， 如 图 3-4 所 示 。 
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xld with a patented, three-step process. 


1. Load in data. 
2. Generate a visual representation. 
3. Activate magic healing function. 
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<htmL> 


<head></head> 了 了 Styles + 9 次- 
四 4 > Ae | 
I > Pe element.style { 
<hi>Amazing Visualization Tool Cures ALL Ills</hi> 
e <p>..</p> } 
<li>fevers</li> ‘Matched CSS Rules_ eu dati 
<li>chills</\i> ul, menu, dir { User agent stylesheet 
<li>general malaise</li> display: block; 
</ul> list-style-type: disc; 


<p>It achieves this end with a patented, three-step process,</p> 
b<ol>.</0l> 
</body> 
</html> 


> Computed Style | Show inherited 上 





—webkit-margin-before: lem; 
—webkit-margin-after: lem; 
-webkit-margin-start: QOpx; 
-webkit-margin-end: @pxi 





—webkit—padding-start: 40px; 
} 
Metrics 
p » Properties 
kb DOM Breakpoints 
Pb Event Listeners YY 


旧 , 汪 | Q | nm body 加 次 

















图 3-4， 高 之 元素 盒子 的 检查 器 


图 中 的 无 序列 表 ul 0 首先 ， 这 个 列表 总 的 大 小 (宽度 和 高 度 ) 
显示 在 了 左下 角 黄 色 的 小 提示 框 中 。 其 次 ， 这 个 列表 在 DOM 中 的 位 置 ， 通 过 检查 
器 左下 角 也 能 看 出 来 : html > body > ul。 


另外 ，ul 盒子 扩展 到 了 与 整个 窗口 同 宽 
器 右 侧 “Computed: Style” 中 ， 有 一 条 display:: 
素 ， 顾 名 思 义 ， 就 是 构成 文本 行 的 元 素 ， 而 不 是 像 块 级 元 素 那 样 上 下 堆 县 
行内 元 素 包 括 strong、em、a 和 span。 


默认 情况 下 ， 块 级 元 素 会 扩展 到 填 满 父 元 素 ， 从 而 把 后 面 的 同胞 元 素 挤 到 自己 脚下 。 
行内 元 素 不 会 扩展 ， 它 们 相互 并 肩 排 列 ， 一 行 之 中 鳞 次 柿 比 。( 思 考 一 下 : 你 想 成 为 
什么 元 素 ?) 














因为 它 是 一 个 块 级 元 素 。( 可 以 看 看 检查 
block。) 与 之 相对 的 是 行内 元 
。 常 见 的 
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3.6 CSS 


CSS (Cascading Style Sheets， 层 县 样式 表 ) 控制 DOM 元 素 的 视觉 外 观 。 下 面 就 是 
一 条 简单 的 CSS 样式 : 
body { 
background-color: white; 


color: black; 


} 


CSS 样式 由 选择 符 和 属性 组 成 。 选 择 符 后 面 跟着 属性 ， 但 被 一 对 花 括 号 所 包围 。 属 
性 和 值 由 冒号 分 隔 ， 每 个 属性 声明 以 分 号 结尾 。 








相同 的 属性 可 以 应 用 给 多 个 选择 符 ， 只 要 用 喜 号 分 隔 选 择 符 即 可 ， 比 如 : 


举 个 例子 ， 假 设 你 想 让 段落 p 和 列表 项 1i 拥有 相同 的 文字 大 小 、 行 高 和 颜色 ， 可 
以 这 样 写 : 





P， 

汪汪 /人 
font-size: 12px; 
line-height: 14px; 
color: orange; 


} 
所 有 这 些 放 到 一 块 (选择 符 和 带 花 括号 的 属性 ) 就 叫做 一 条 CSS 规则 。 


3.6.1 选择 符 
D3 使 用 CSS 式 的 选择 符 来 标识 要 操作 的 元 素 ， 因 此 理解 怎么 使 用 选择 符 至 关 重 要 。 


CSS 中 的 选择 符 用 于 标识 要 应 用 样式 的 元 素 ， 有 很 多 种 ， 我 们 这 里 只 介绍 其 中 最 简 
单 的 几 种 。 

















1. 类 型 选择 符 
这 种 选择 符 最 简单 ， 就 是 匹配 同名 DOM 元 素 的 标签 名 : 























h1 /* 选择 所 有 一 级 标题 eh 
p /* 选择 所 有 段落 */ 
strong /* 选择 所 有 strong 元 素 */ 
em /* 选择 所 有 em 元 素 */ 
div /* 选择 所 有 div 元 素 a 
后 代 选 择 符 
后 代 选 择 符 匹 配 包含 在 “出 身 于 ”) 另 一 个 元 素 中 的 元 素 。 在 应 用 样式 的 时 候 ， 
后 代 选 择 符 的 使 用 率 非常 
hl em /* 选择 包含 在 hl 中 的 em 元 素 */ 
div P /* 选择 包含 在 div 中 的 pp 元素 */ 
类 选择 符 
类 选择 符 匹 配 具 有 指定 类 的 所 有 元 素 。 类 名 之 前 要 加 一 个 英文 句点 ， 看 下 面 的 例子 
.caption 选择 带 "caption" 类 的 元 素 */ 
.label 选择 带 "label" 类 的 元 素 */ 
.axis 选择 带 "axis" 类 的 元 素 */ 


有 些 元 素 可 能 包含 多 个 类 ， 为 此 可 以 把 多 个 类 名 串 起 来 选择 它们 ， 比 如 : 


.bar.highlight  /* 选择 高 亮 (hightlight) 的 条 形 (bar) */ 
.axis.x /* 选择 x 轴 (axix) */ 
.axis.y /* 选择 y 轴 (axix) */ 


.axis 可 以 为 两 个 轴 应 用 样式 ， 而 .axis .x 则 只 能 为 x 轴 应 用 样式 。 
4. ID 选 择 符 


ID 选择 符 匹配 具有 给 定 ID 的 一 个 元 素 。( 别 忘 了 ,一 个 ID 只 能 在 DOM 中 出 现 一 
次 。) ID 前 面 要 带 一 个 井 字 号 。 














#header 选择 ID 为 "header" 的 元 素 */ 
#nav - 选择 ID 为 "nav" 的 元 素 */ 
#export /* 选择 ID 为 "export" 的 元 素 */ 





选择 符 可 以 通过 各 种 组 合 来 达到 选择 特定 元 素 的 目的 。 比 如 ， 可 以 把 两 个 选择 符 串 
起 来 ， 选 择 一 个 更 具体 的 元 素 : 

















div.sidebar /* 只 选择 带 有 "sidebar" 类 的 div， 而 不 选择 带 其 他 类 的 div */ 
#button.on /* 只 选择 带 有 "on" 类 ， 有 是 ID 为 "button" 的 元 素 */ 





提醒 大 家 一 下 ，DOM 是 动态 变化 的 ， 类 和 ID 随时 可 能 被 加 入 ， 或 者 被 删除 ， 所 以 
你 的 CSS 规则 只 能 适用 于 某 些 特定 的 情况 。 
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要 了 解 更 多 有 关 选 择 符 的 信息 ， 请 参考 Mozilla Developer Network (http://mzl.la/ 
V27Mcr ) 。 


3.6.2 属性 和 值 
多 个 属性 和 值 累 积 起 来 ， 就 会 构成 特定 的 样式 : 


margin: 10px; 

padding: 25px; 

background-color: yellow; 

Color; Plnk; 

font-family: Helvetica, Arial, sans-serif; 





虽然 大 家 自己 能 看 明白 ， 但 还 是 多 说 几 名 吧 。 每 个 属性 都 应 匹配 不 同 的 信息 ， 比 如 
color 要 有 一 种 颜色 值 ， 而 margin 需要 一 个 长 度 值 (这 里 单位 是 px， 即 像素 ) 。 


顺便 说 一 下 ， 颜 色 可 以 使 用 以 下 几 种 格式 。 


。 颜色 名 : Orange。 

。 十 六 进 制 值 : #3388aa 或 #38a。 

。 RGB 值 : rgpb (10，150，20)。 

带 透 明 通道 的 RGB 值 : *gba(10，150，20，0.5)。 


至 于 所 有 的 属性 ， 在 网 上 很 容易 找 一 个 表格 ， 因 此 这 里 就 不 再 多 说 了 。 将 来 碰 上 的 
时 候 ， 我 们 再 逐个 介绍 。 


福 





3.6.3 注释 
/* 响 ， 差 点 给 忘 了 ， 这 是 css 中 注释 的 格式 。 


以 斜 杜 和 星 号 开头 ， 以 另 一 个 星 号 和 和 斜 杠 
结尾 。 中 间 的 所 有 内 容 都 会 被 浏览 器 忽略 。 








*] 
3.6.4 引用 样式 
把 CSS 规则 应 用 给 HTML 文档 的 方式 有 三 种 。 


1. 在 HTML 中 髋 入 CSS 
把 CSS 规则 余 入 到 HTML 文档 ， 可 以 把 所 有 东西 都 放 在 一 个 文件 中 。 在 文档 的 头 
部 ， 可 以 把 CSS 代码 放 在 style 元 素 中 。 

<html> 


<head> 
<style type="text/css"> 











font-size: 24px; 
font-weight: bold; 
background-color: red; 
color: white; 


} 


</style> 
</head> 
<body> 
<p>If I were to ask you, as a mere paragraph, would you 
say that I have style?</p> 
</body> 
</html> 


这 个 HTML 页 面 和 CSS 规则 党 染 后 的 结果 如 图 3-5 所 示 。 








If I were to ask you, as a mere paragraph， 
AENA 1 MIM 


图 3-5: 泻 染 庶 入 CSS 规则 后 的 效果 


嵌入 CSS 规则 是 最 简单 的 办 法 。 但 是 ， 我 建议 大 家 把 不 同 的 代码 (HTML、CSS 和 
JavaScript 代码 ) 分 别 放 在 不 同 的 文件 中 。 


2. 在 HTML 中 引用 外 部 样式 表 
可 以 把 CSS 保存 一 个 单独 的 纯 文本 文件 中 ， 扩 展 名 为 .css， 比 如 style.css。 然 后 ， 
在 HTML 文档 中 通过 头 部 的 1ink 元 素 引 用 该 外 部 样式 文件 即 可 。 




















<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<p>If I were to ask you, as a mere paragraph, would you 
say that I have style?</p> 
</body> 
</html> 


3 





这 样 演 染 后 的 结果 与 前 面 的 例子 完全 一 样 。 


3. 插入 行内 样式 
第 三 种 应 用 CSS 样式 的 方法 就 是 把 CSS 规则 直接 插入 HTML 元 素 标签 内 。 为 此 ， 
要 使 用 style 属性 为 元 素 指 定 规则 。CSS 规则 要 像 其 他 属性 值 一 样 ， 放 到 一 对 双 引 
号 中 。 比 如 下 面 的 代码 会 得 到 图 3-6 所 示 的 结果 。 
































技术 基础 | 31 


<p style="color: blue; font-size: 48px; font-style: italic;"> 
Inline styles are kind of a hassle</p> 





Inline styles are kind of a hassle 











图 3-6: 泻 染 行内 CSS 规则 的 效果 
因为 行内 样式 是 直接 应 用 到 具体 元 素 上 的 ， 所 以 就 不 需要 选择 符 了 。 


太 多 的 行内 样式 会 导致 HTML 代码 混乱 ， 难 以 理解 。 可 是 在 需要 给 ee ri 
殊 效 果 ， 而 又 不 方便 把 它 写 进 更 大 的 样式 表 文 件 时 ， 使 用 行内 样式 还 是 可 以 接受 
后 面 我 们 会 介绍 在 D3 中 怎么 以 编程 的 方式 为 元 素 应 用 行内 样式 〈 一 次 应 用 一 人 
式 ， 很 简单 的 ) 。 


tt 








3.6.5 ”继承 、 层 又 和 特 指 度 
在 没有 为 某 个 元 素 指定 样式 的 情况 下 ， 这 个 元 素 的 很 多 样式 都 是 从 它 的 祖先 元 素 继 
承 来 的 。 比 如 ， 下 面 的 文档 给 div 指定 了 一 些 样式 ; 








<html> 
<head> 
<title></title> 
<style type="text/css"> 


div { 
background-color: red; 
font-size: 24px; 
font-weight: bold; 
color: white; 


} 


</style> 

</head> 

<body> 
<p>I am a sibling to the div.</p> 
<div> 

<p>I am a descendant and child of the div.</p> 

</div> 

</body> 

</html> 


这 个 页 面 在 演 染 后 ， 本 来 是 应 用 给 aiv 的 样式 〈 红 色 背 景 、 粗 体 文本 等 ) 也 被 第 二 
个 朗 雍 元 素 继承 了 (如 图 3-7 所 示 )， 因 为 上 是 这 个 aiv 的 后 代 。 

















Iam a sibling to the div. 


TI am a descendant and child of the div. 


3-7: 继承 样式 


继承 是 CSS 中 一 个 非常 重要 的 特性 ， 子 元 素 因 此 会 拥有 父 元 素 的 特征 。( 现 实 当中 
不 是 也 一 样 嘛 。) 


最 后 ， 我 想 回 答 大 家 在 心里 此 了 很 久 的 一 个 问题 : 为 什么 称 之 为 层 琶 样式 表 ? 因为 
选择 符 会 从 上 到 下 按照 层 又 关系 匹配 。 说 具体 一 点 ， 假 设 多 个 选择 符 都 给 一 个 元 素 
应 用 了 样式 ， 那 么 后 定义 的 规则 就 会 覆盖 先 定义 的 规则 。 比 如 下 面 的 规则 会 将 文档 
中 所 有 p 元 素 中 文本 的 颜色 设 定 为 蓝 色 ， 但 带 有 highlight 类 的 p 元 素 中 的 文本 
则 是 黑色 ， 而 且 带 有 黄色 背景 ， 如 图 3-8 所 示 。 第 一 条 规则 通过 选择 符 p 首先 应 用 ， 
而 第 二 条 规则 通过 选择 符 b.highlight 覆盖 了 不 够 具体 的 pb 规则 。 



































pl 
color: blue; 
} 


p.highlight { 
color: black; 
background-color: yellow; 


} 





A regular paragraph 











3-8: CSS 的 层 琶 与 继承 


后 定义 的 规则 一 般 会 覆盖 先 定 义 的 规则 ， 但 也 不 全 是 。 关 键 是 要 看 每 个 选择 符 的 特 
指 度 (specificity)。 选 择 符 pb.highlight 即使 被 放 在 第 一 条 规则 的 位 置 上 ， 它 也 会 
覆盖 选择 符 pb， 因为 它 是 一 个 更 具体 的 选择 符 。 假 如 两 个 选择 符 具 有 相同 的 特 指 度 ， 
那么 这 时 候 后 定义 的 才 会 胜出 。 


特 指 度 也 是 CSS 中 最 不 好 理解 的 一 个 地 方 。 计 算 选 择 符 特 指 度 的 规则 一 两 句 话 讲 不 
明白 ， 所 以 干脆 我 们 不 在 这 里 讲 了 。 为 了 避免 以 后 麻烦 ， 最 好 保证 自己 的 选择 符 清 
晰 、 好 理解 。 总 的 原则 是 把 通用 选择 符 放 在 最 前 面 定义 ， 而 把 更 具体 的 选择 符 放 在 
后 面 定义 ， 这 样 就 够 了 。 
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3.7 JavaScript 


JavaScript 是 动态 脚本 语言 ， 通 过 操作 DOM 动态 修改 页 面 。 前 面 提 到 过 ， 学 习 D3 
也 是 学 习 JavaScript。 更 多 内 容 我 们 会 在 用 到 的 时 候 再 讲 ， 本 节 只 介绍 一 些 基础 知识 。 


3.7.1 Hello, Console 

我 们 通常 都 把 JavaScript 代码 (或 “脚本 ”) 放 在 一 个 文本 文件 中 ， 然 后 通过 网 页 让 
浏览 器 加 载 这 个 文件 。 实 际 上 ， 也 可 以 直接 在 浏览 器 的 控制 台 (Console) 中 输入 
JavaScript 代码 。 这 是 一 种 测试 代码 的 直接 而 简单 的 方式 ， 也 可 以 在 其 中 调试 代码 。 
总 之 ， 控 制 台 是 观察 代码 运行 情况 的 一 个 基本 工具 。 

在 Chrome 中 ， 按 F12 调 出 开发 者 工具 ， 然 后 切换 到 “Console” 选 项 卡 (或 直接 按 


Ctrl+Shift+J) 。 在 Firefox 中 ， 按 Shift+F2 打开 “开发 者 工具 栏 ”， 然 后 选择 “Web 
控制 台 ”。 在 Safari 中 ， 按 CtrltAlt+C 打开 “控制 台 ”， 参 见 图 3-9。 














本 | 号 | Hements [a | Resources (©) Nerwo 
AD | Erors Wamings Logs 
| 

















3-9: 新 鲜 出 炉 的 JavaScript 控制 台 …… 好 好 品尝 ! 


在 控制 台中 每 次 只 能 输入 一 行 代码 ， 而 且 会 返回 你 输入 的 结果 。 比 如 ， 输 入 数值 7， 
控制 台 就 会 返回 7。 一 点 都 不 迟疑 。 


有 时 候 ， 你 需要 自己 的 脚本 能 把 值 自动 输出 到 控制 台 ， 以 便 实 时 观测 代码 执行 过 程 。 
为 此 ， 可 以 使 用 如 下 代码 : console.log("something") ; 。 


下 面 就 跟着 我 在 控制 台中 输入 示例 ， 看 看 结果 吧 。 





变量 是 数据 的 容器 。 一 个 简单 的 变量 可 以 保存 一 个 值 : 


Var number = 5; 


得 
凯 
计 


在 这 条 语句 中 ，var 表示 要 声明 一 个 新 变量 ， 而 变量 的 名 字 是 number。 
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JavaScript 中 的 赋值 操作 符 ， 它 先 取 得 右边 的 值 (5)， 然 后 把 这 个 值 赋 给 左边 的 变 
量 (number)。 因 此 ， 在 看 到 下 面 这 样 的 代码 时 


defaultColor = "hot pink"; 
可 以 试 着 不 把 等 于 号 理解 成 “等 于 ”"， 而 是 “设置 成 于是， 上 面 的 赋值 语句 就 可 
以 读 作 “把 变量 defaultcolor 设置 成 桃红 色 ("hot pink" 太志 
刚才 我 们 看 到 了 ， 变 量 可 以 保存 数值 ， 也 可 以 保存 文本 字符 串 〈 之 所 以 叫 “字符 
串 "”， 是 因为 它们 是 由 一 个 个 的 字符 串 起 来 的 ) 。 字 符 串 必 须 用 引号 引起 来 。 除 此 之 
外 ， 变 量 还 可 以 保存 布尔 值 true 或 false: 

Var thisMakesSenseSoFar = true; 


另外 ， 在 JavaScript 中 ， 语 句 是 以 分 号 结尾 的 。 


好 了 ,现在 可 以 在 控制 台中 试 着 声明 一 些 变 量 。 比 如 , 输入 var amount = 200， 
然后 按 回 车 ， 在 下 一 行 继续 输入 amount ， 回 车 。 你 会 看 到 控制 台 返 回 了 200， 这 说 
明 JavaScript 记 住 了 你 赋 给 变量 amount 的 值 ! 








3.7.3 ”其 他 数据 类 型 

变量 保存 着 数据 ， 是 所 有 数据 结构 的 基础 ， 复 杂 的 数据 结构 都 是 由 简单 的 变量 组 合 
而 成 的 。 

下 面 我 们 再 介绍 几 种 复杂 的 数据 类 型 ， 有 数组 、 对 象 和 对 象 的 数组 。 如 果 你 觉得 可 
行 ， 现 在 可 以 跳 过 下 面 的 内 容 ， 等 到 考虑 向 D3 中 加 载 数据 时 再 回来 补课 。 

1. 数组 

数组 由 一 系列 值 组 成 ， 这 些 值 方便 地 保存 在 一 个 变量 中 。 相 反 ， 如 果 用 不 同 的 变量 
记录 多 个 值 会 很 不 方便 : 


Var numberA 


Var numberB = 
Var numberC = 15; 
Var numberD = 20; 
Var numberE = 25; 


如 果 写 成 数组 ， 那 么 表示 这 些 值 的 形式 就 简单 多 了 。JavaScript 中 的 方 括号 ([]) 代 
表 数 组 ， 每 个 值 用 英文 逗号 分 隔 : 

var numbers = [ 5, 10, 15, 20, 25 ]; 
数组 在 数据 可 视 化 中 是 无 处 不 在 的 ， 所 以 你 会 对 它 非常 熟悉 的 。 要 取得 (访问) 数 
组 中 的 值 ， 也 要 使 用 方 括号 : 
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numbers [2] // 返回 15 


方 括号 中 的 数字 代表 数组 中 值 的 位 置 ， 但 这 个 位 置 是 从 零 开 始 计数 的 。 因 此 ， 数 组 
中 的 第 一 个 位 置 用 0 表示， 第 二 个 位 置 用 1 表示 ， 依 此 类 推 : 





























numbers[0] // 返回 5 

numbers[1] // 返回 10 
numbers[2] // 返回 15 
numbers [3] // 返回 20 
numbers [4] // 返回 25 





把 数组 想象 成 一 个 由 行 和 列 组 成 的 表格 可 能 更 好 理解 : 





位 置 值 
0 5 
1 10 
2 15 
3 20 
4 25 


数组 可 以 包含 任何 类 型 的 数据 ， 不 光 是 整数 : 


Var percentages = [ 0.55，0.32，0.91 ]; 
Var names = [ "Ernie", "Bert", "Oscar" ]; 
percentages[1] // 返回 0.32 

names [1] // 返回 "Bert" 





尽管 不 推荐 ， 但 不 同类 型 的 数据 照样 可 以 保存 在 同一 个 数组 中 : 
Var mishmash s | Tr 2 3 UB, Se6 "oh boy”; Vaay Tt. ienmn't",. true.]y 


2. 对 象 

数组 很 适合 保存 一 系列 的 值 ， 但 对 于 更 复杂 的 数据 形态 ， 臣 人 就 得 使 用 对 象 这 种 数 
据 结构 了 。 我 们 可 以 把 JavaScript 中 的 对 象 想象 成 一 个 定义 的 数据 结构 ， 使 用 花 括 
号 ({}) 构造 对 象 。 在 花 括 号 之 间 ， 是 对 象 的 属性 和 值 ， 两 者 以 冒号 分 隔 。 每 对 属 
性 和 值 以 分 号 隔 开 (不 包括 最 后 一 对 属性 和 值 ) : 








var fruit = { 
kind: "grape", 
Color: ™red", 
quantity: 12, 
tasty: true 


}; 
要 引用 对 象 中 的 某 个 值 ， 可 以 使 用 点 操作 符 ， 然 后 紧 跟着 属性 名 : 


fruit .kind // 返回 "grape" 
fruit.color // 返回 "red" 
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回 12 
回 true 


fruit.gquantity / 


/ 返 
fruit.tasty // 返 


可 以 把 这 些 值 想象 为 “属于 ”对 象 。 噢 ， 看 哪 ， 这 是 我 的 水 果 (fruit)。 “什么 水 
果 啊 ? ”你 可 能 会 问 。 水 果 种 类 (fruit.kind) 不 是 告诉 你 它 是 葡萄 〈("grape") 
了 吗 。“ 好 吃 吗 ? ”当然 啦 ， 水 果 好 吃 (fruit.tasty) 的 值 是 真 (true)。 





3. 对 象 加 数组 


把 对 象 和 数组 组 合 起 来 就 可 以 创建 对 象 的 数组 ， 或 者 数组 的 对 象 ， 或 者 对 象 的 对 


象 …… 好 吧 ， 反 正 任何 适合 你 的 数据 集 的 数据 结构 。 


假设 我 们 又 拿 到 了 更 多 水 果 ， 所 以 需要 扩展 库存 记录 。 那 么 我 在 外 面 用 方 括号 ， 也 


就 是 数组 ， 然 后 在 里 面 用 花 括 号 ， 也 就 是 对 象 ， 对 象 之 间 呢 ， 当 然 用 逗号 分 隔 : 


var fruitgs s | 
kind: "grape", 
color: "red", 
guantitys ‘12 
tasty: true 


kingd: “kiwi", 
Golor: “brown", 
quantity: 98, 
tasty: true 


kind: "banana", 
COlor: “yellow", 
quantity: 0, 
tasty: true 


i 


要 读 取 这 种 数据 结构 ， 只 要 按照 属性 去 查找 值 即 可 。 别 忘 了 ，[] 表示 数组 ，{} 表 


示 对 象 。 因 此 ，fruits 是 数组 ， 首 先 得 用 方 括号 来 指定 要 读 取 的 水 果 的 索引 : 


fruits[1] 


接 下 来 ， 每 个 数组 元 素 就 是 一 个 水 果 对 象 咽 。 所 以 ， 再 加 上 一 个 点 和 属性 名 就 可 以 了 : 





fruits[1] .quantity  // 返 回 98 


下 面 列 出 了 访问 fruits 对 象 数 组 中 所 有 值 的 方法 : 


fruits[0] .kind == "grape" 
twitsl0] Golor ssa. ed" 
fruits[0] .quantity == 12 
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fruits[0] .tasty == true 
fruits[1] .kind == "kiwi" 
fruits[1] .color == "brown" 
fruits[1l] .quantity == 98 
fruits[1] .tasty == true 
fruits[2] .King == "banana" 
fruits[l2] CoLlor == "yellow" 
fruits[2] .quantity == 0 

fruits [2] .tasty == true 


没 错 ， 我 们 有 fruits [2] .quantity 个 香 蔓 。 


JSON。 在 使 用 D3 的 过 程 中 ， 不 可 避免 地 要 遇见 JSON (JavaScript Object 
Notation，JavaScript 对 象 表 示 法 )。 想 继续 看 就 看 吧 ， 但 JSON 基本 就 是 一 个 用 
JavaScript 对 象 语法 来 组 织 数 据 的 格式 。 这 种 语法 经 过 了 优化 ， 可 以 在 JavaScript 
(显然 嘛 ) 和 AJAX 请 求 中 使 用 。 很 多 基于 Web 的 应 用 程序 编程 接口 (API， 
Application Programming Interface) 都 返回 JSON 格式 的 数据 。 相 对 XML 而 言 ， 
JSON 更 容易 在 JavaScript 中 被 解析 ， 当 然 D3 操作 它 也 非常 方便 。 


就 这 么 多 了 ， 实 际 上 JSON 看 起 来 也 没什么 新 东西 : 





{ 
"kind"; "graper; 
neolor™.™: vred", 
vouantity rs 12.; 
"tasty": true 

} 


唯一 的 差别 就 是 属性 名 现在 带 着 双 引 号 ， 变 成 了 字符 串 了 。 
JSON 对 象 与 其 他 JavaScript 对 象 一 样 ， 当 然 也 可 以 保存 在 变量 中 : 











var jsonFruit = { 
"kind"s: "grape,., 
neolor™: "red", 


"aquantity yy LT2.; 
"tasty": true 
}; 
GeoJSON。 正 如 JSON 是 基于 JavaScript 对 象 语法 的 数据 格式 ，GeoJSON 是 基于 
JSON 格式 的 一 种 格式 ， 专 门 用 于 保存 地 理 数据 。 所 有 GeoJSON 对 象 都 是 JSON 对 
象 ， 所 有 JSON 对 象 都 是 JavaScript 对 象 。 


GeoJSON 可 以 保存 地 理 空 间 中 的 点 (比如 经 纬度 坐标 ) 或 者 形状 (如 直线 和 多 边 
形 )， 以 及 其 他 空间 特征 。 如 果 你 有 很 多 地 理 数据 ， 为 了 在 D3 中 更 方便 地 利用 它 
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们 ， 最 好 将 其 解析 成 GeoJSON 格式 。 





在 将 来 讨论 地 图 的 时 候 ， 我 们 还 会 详细 讲解 GeoJSON。 现 在 ， 只 要 了 解 像 下 面 这 样 
简单 的 GeoJSON 数据 即 可 : 
{ 
"type": "FeatureCollection", 
"features": [ 
{ 
Teypevrs FeaAture™, 
"geometry": { 
VeyBe rs POLNnE'., 
"Coordinates": [ 150.1282427, -24.471803 ] 
}, 
"properties": { 
type : town TY 


} 


} 


正好 ， 坐 标 ("coordinates") 数组 的 两 个 值 分 别 是 经 度 和 纬度 。 


3.7.4 数学 运算 符 
JavaScript 中 执行 数值 的 加 、 减 、 乘 、 除 运算 分 别 有 相 应 的 数学 运算 符 : 





到 // 加 
- // 减 
*  // 乘 
/  // 除 
例如 ， 在 控制 
工 + 2 
本 刁 对 
和 和 党 
ely 


人 
口 


中 届 


E> 


回 3 
回 9.5 
回 99 
回 0.75 





To Te Sm Se 
Se ee 


3.7.5 ”比较 运算 符 
要 想 比 较 两 个 值 ， 可 以 使 用 下 列 运算 符 : 


VY A= 
Ll 


我 


V 


// 等 于 
// 不 等 于 
// 小 于 
// 大 于 
// 小 于 等 于 
// 大 于 等 于 


入 8 * 2， 按 回 车 ， 你 会 看 到 16。 下 面 是 另外 一 些 例子 : 
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这 些 运算 符 都 是 拿 左 边 的 值 跟 右边 的 值 比较 。 如 果 结 果 为 真 ， 返回 true; 否则 ， 返 
回 false。 


快 试 试 吧 ! 在 控制 台 里 输入 以 下 比较 表达 式 ， 看 看 结果 如 何 : 


Ee 

驴 . 二 三 号 

3 >= 3 

3 Ss 2 

100 去 这 
298 ls 298 


(JavaScript 也 提供 了 === 和 !== 运算 符 ， 这 两 个 相等 和 不 等 运算 符 不 会 转换 数据 类 
型 , 但 本 书 中 不 用 作 这 种 区 分 。) 


3.7.6 ”控制 结构 
在 代码 需要 作出 决定 或 重复 执行 某 些 操作 时 ， 就 要 用 到 控制 结构 。 可 选择 的 控制 结 
构 很 多 ， 但 我 们 今天 只 介绍 if 语句 和 for 循环 。 





1. 1E() : 只 要 
if 语句 通过 比较 运算 符 来 确定 某 个 语句 是 真是 假 ; 

















if (test) { 
// 如 果 为 真 则 执行 这 里 的 代码 
} 
如 果 条 件 测试 结果 为 true， 就 运行 花 插 号 中 的 代码 。 否 则 ， 就 忽略 花 插 号 中 的 代 
码 ， 继 续 向 下 执行 。 


症 生 (二 号) { 
console.1og("Eurekal Three is less than five!"),; 
} 


在 前 面 的 例子 中 ， 花 括号 中 的 代码 始终 都 会 执行 ， 因 为 3<5 永远 为 true。 在 比较 
变量 或 其 他 可 变 条 件 时 ，if 语句 更 能 派 上 用 场 。 








if (someValue < anotherValue) { 
// 把 someValue 设置 成 anotherValue 
// 从 而 恢复 这 个 世界 的 平等 和 秩序 


someValue = anotherValue; 





} 


2. for () : 现在 …… 
可 以 使 用 for 循环 重复 执行 相同 的 代码 ， 语 法 稍 有 变化 : 


for (initialization; test; update) { 
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// 每 次 都 要 执行 的 代码 


之 所 以 称 它 为 for 循环 ， 是 因为 可 以 指定 循环 的 次 数 。 首 先 ， 运 行 初 始 化 
(initialization ) 语句 。 然 后 ， 对 测试 条 件 (test ) 求 值 ， 就 像 运行 一 个 小 三 语句 一 
样 。 最 后 ， 运 行 更 新 语句 (update) ， 再 重新 对 测试 条 件 求 值 。 


for 循环 最 常见 的 用 法 就 是 使 用 一 个 每 次 递增 1 的 计数 器 控制 循环 。( 计 数 器 一 般 都 
命名 为 i1， 因 为 很 短 ,) 





for (var i = 0; i < 5; i++) { 
console.10g (i); // 把 值 输出 到 控制 台 
} 


以 上 代码 会 在 控制 台中 循环 输出 以 下 结果 : 








心 ww N 上 口 


第 一 次 执行 代码 时 ， 声 明了 变量 1， 其 值 初 始 化 为 0。 因为 工 小 于 5， 所 以 执行 花 
括号 内 代码 ， 把 i 的 当前 值 (0) 输出 到 控制 台 。 然 后 , i 加 1 (i++ 是 i =i+1 
的 简写 形式 )。 好 了 ， 现 在 i 等 于 1， 所 以 测试 求 值 结果 仍 然 为 true， 下 次 执行 花 
括号 内 代码 。 但 这 一 次 输出 到 控制 台 的 值 是 1。 


怎么 样 ， 看 这 种 解释 代码 的 文字 是 不 是 跟 自 己 亲 手 执行 代码 一 样 有 趣 啊 ?” 这 就 是 人 
类 发 明 计算 机 的 原因 。 那 我 就 直接 跳 到 最 后 吧 ， 在 最 后 一 次 执行 代码 之 后 ，i 递增 
为 5， 然 后 测试 求 值 结果 为 false， 循 环 结束 。 


强调 一 下 ， 计 数 器 是 从 o 而 不 是 1 开始 计数 的 。 换 句 话说 ，i 的 第 一 个 值 是 0。 为 
什么 不 是 1 呢 ? 反正 就 是 一 个 惯例 啦 ， 不 过 倒是 跟 计 算 机 索引 数组 的 值 的 计数 规则 
恰好 一 致 。 


3. 对 数组 使 用 for () 循环 

基于 代码 的 数据 可 视 化 如 果 没 有 数组 和 for () 循环 ， 简 直 就 没 法 想象 了 。 数 组 加 上 
for 循环 ， 正 是 数据 极 客 的 “ 双 杀 组 合 "。( 如 果 你 不 觉得 自己 是 “数据 极 客 ”， 那 么 
我 得 提醒 你 一 下 : 看 看 这 本 书 的 封面 ， 你 在 看 什么 书 呢 ?) 


数据 把 很 多 数据 值 组 织 到 了 一 个 方便 的 地 方 。 而 for () 可 以 快速 “循环 ”数组 中 的 
每 个 值 ， 对 它们 执行 某 种 操作 ， 比 如 把 值 转换 成 可 见 的 形式 。D3 一 般 都 会 替 我 们 执 
行 这 种 循环 ， 比 如 使 用 其 魔法 般 的 daata() 方法 。 注 意 下 面 这 个 例子 ， 它 遍历 了 一 
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个 叫 numbers 的 数组 中 的 所 有 值 : 


Var numbers = [ 8, 100, 22, 98, 99, 45 ]; 
for (var i = 0; i < numbers.length; i++) { 
console.1log (numbers [i] ); ”// 把 值 输出 到 控制 台 





} 


看 到 numbers.length 了 吗 ? 这 是 最 重要 的 部 分 。length 是 每 个 数组 都 有 的 属 
性 。 对 这 个 例子 来 说 ，numbers 包含 6 个 值 ， 因 此 对 numbers .1lengtn 求 值 会 得 到 
6， 也 就 是 说 ， 循 环 会 运行 6 次 。 如 果 numbers 包含 10 个 值 ， 循 环 就 运行 10 次 。 
如 果 有 100 万 个 值 …… ， 好 ， 你 明白 了 。 这 也 是 计算 机 最 擅长 做 的 事 : 拿 到 一 组 指 
令 ， 然 后 反复 执行 。 数 据 可 视 化 之 所 以 如 此 吸引 人 ， 也 是 相同 的 原因 。 你 来 设计 和 
编写 可 视 化 系统 ， 系 统 然后 就 可 以 随机 应 变 ， 就 算 再 给 它 换 一 批 数据 也 没 问 题 。 只 
要 系统 的 映射 规则 不 变 ， 数 据 变 了 也 没关系 。 





3.7.7 函数 
函数 就 是 执行 具体 任务 的 代码 块 。 


说 得 具体 一 点 ， 国 数 的 特殊 之 处 表现 在 它 可 以 接收 参数 ， 可 以 返回 值 。 圆 括号 可 以 
调用 (执行) 函数。 如 果 函 数 需 要 参数 《输入 值 )， 那 么 就 在 调用 时 把 参数 放 到 圆 括 
号 中 。 


看 到 下 面 这 样 的 代码 ， 你 就 知道 这 是 在 调用 函数 : 











calculateGratuity(38); 
事实 上 ， 我 们 在 前 面 使 用 console.1og 时, 已 经 在 调用 函数 了 : 
console.log("Look at me. I can do stuff!"); 


但 最 重要 的 ， 还 是 可 以 编写 自己 的 函数 。 在 JavaScript 中 有 多 种 方式 可 以 定义 函数 ， 
下 面 介绍 一 种 比较 简单 的 方式 ， 本 书 也 会 统一 采用 这 种 方式 : 








var calculateGratuity = function(bill) { 
return bill * 0.2; 


} 
这 里 声明 了 一 个 新 变量 ， 叫 calculateGratuity。 然 后 ， 没 有 赋 给 它 一 个 数值 或 
字符 串 ， 而 是 把 一 个 函数 保存 在 了 这 个 变量 中 。 在 函数 的 圆 括号 内 ， 我 们 又 声明 了 
另 一 个 变量 pil11， 只 有 函数 自己 可 以 使 用 它 。bi11 就 是 将 来 接收 输入 值 的 参数 。 
调用 国 数 时 ， 就 可 以 传人 相应 的 参数 值 ， 然 后 函数 会 把 这 个 值 乘 以 0.2， 返 回 计 算 
结果 。 
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如 果 这 样 调用 : 





calculateGratuity(38); 





函数 就 会 返回 7.6。 不 错 啊 ，20% 的 小 费 (gratuity) 呢 ! 
当然 ， 可 以 把 输出 结果 保存 在 另 一 个 变量 里 ， 以 便 将 来 使 用 : 


var tip = calculateGratuity (38); 
console.log(tip); // 在 控制 台中 输出 7.6 


还 有 一 种 匿名 函数 ， 跟 calculateGratuity 不 一 样 ， 没 有 名 字 :。D3 中 也 使 用 了 
大 量 匿名 函数 ， 但 我 想 在 遇 到 的 时 候 再 介绍 它们 。 














3.7.8 注释 
/* JavaScript 支持 Css 风格 的 注释 */ 





// 不 过 ， 也 可 以 使 用 双 和 斜 杠 
// 双 和 斜 杜 后 面 这 一 行 的 内 容 全 会 被 忽略 
// 这 种 单行 注释 很 适合 写 点 简短 的 说 明 
// 有 时 候 ， 也 可 以 放 在 一 行 代码 的 后 面 : 























console.1log("Brilliant"); // 把 "Brilliant" 输出 到 控制 台 


3.7.9 引用 脚本 文件 
脚本 可 以 直接 放 在 HTML 中 ， 位 于 一 对 script 标签 之 间 : 


<body> 
<script type="text/javascript"> 
alert ("Hello, world!"); 
</script> 
</body> 


或 者 ,保存 一 个 独立 的 文件 中 ， 以 .js 作为 扩展 名 。 然 后 在 HTML (可 能 像 这 里 一 
样 在 head 标签 内 ， 也 可 能 在 结束 的 body 标签 之 前 ) : 





<head> 

<title>page Title</title> 

<script type="text/javascript" src="myscript.js"></script> 
</head> 








证 ; 
[ea 
3 


: 严格 来 讲 ， 这 里 展示 的 定义 函数 的 方式 使 用 了 匿名 函数 表达 式 ， 但 通过 把 匿名 函数 赋值 给 一 
个 变量 ， 也 就 相当 于 给 了 函数 一 个 名 字 。 如 果 这 里 的 函数 不 是 匿名 的 ， 比 如 写成 function 
calculateGratuity (bil1){...}， 那 这 个 函数 就 叫 具 名 函数 表达 式 。 最 后 一 种 定义 方式 是 函数 声 
明 ， 即 不 使 用 var， 直 接 写 function calculateGratuity (bill1){...}。 一 一 译 者 注 
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3.7.10 ”JavaScript 陷 阱 

作为 一 种 馈赠 ， 不 额外 收 钱 ， 我 再 给 大 家 介绍 四 个 JavaScript 中 的 陷阱 : 如 果 我 早 
知道 这 些 陷阱 ， 可 能 就 不 用 每 次 都 调试 到 后 半夜 了 ， 也 会 少 很 多 次 心急 火 烘 的 经 历 ， 
少 分 泌 一 些 想 让 人 玩命 的 皮质 醇 。 在 学 习 本 书后 面 内 容 的 时 候 ， 你 可 能 时 不 时 地 需 
要 看 看 这 一 节 。 


1. 动态 类 型 

JavaScript 是 一 种 松散 类 型 的 语言 。 换 句 话 说， 不必 提 前 声明 保存 在 变量 中 的 数据 是 
什么 类 型 。Java 〈 跟 JavaScript 完全 不 一 样 ) 等 其 他 语言 都 要 求 提前 声明 变量 类 型 ， 
比如 int、float、boolean 或 String: 

















// 在 Java 中 声明 变量 
int number = 5; 

float value = 12.3467; 
boolean active = true; 

String text = "Crystal clear"; 


而 JavaScript 则 会 根据 赋 给 变量 的 数据 ， 自 动 推 断 其 类 型 。( 注 意 ,， ”或 ""' 表示 字 
符 串 。 我 个 人 喜欢 双 引 号 ， 但 有 人 喜欢 单 引 号 。) 











// 在 Javascript 中 声明 变量 
Var number = 5; 

Var Value = 12.3467; 

Var active = true; 

var ee 


好 讨厌 哪 ， 那 么 多 var ! 不 过 也 有 方便 的 地 方 : 不 用 知道 保存 什么 数据 ， 就 可 以 声 
明和 命名 变量 。 甚 至 随意 改变 保存 的 数据 类 型 ，JavaScript 也 不 会 怪 你 : 


var Value = 100;，; 

Value = 99.9999 ; 

value = false; 

value = "This can’ t possibly work."; 

Value = "Argh, it does work! No errorzz2z2zZ!",; 


这 里 要 提醒 大 家 的 是 ， 如 果 你 不 小 心 在 一 个 数值 变量 里 保存 了 一 个 字符 串 ， 后 来 代 
码 就 出 现 了 一 些 奇 怪 的 问题 ， 和 希望 你 自己 能 好 好 反省 一 下 。 如 果 你 不 确定 某 个 变量 
中 保存 着 什么 类 型 的 数据 ， 可 以 使 用 typeof 操作 符 : 








typeof 67; // 返回 "number" 
Var myName = "Scott",; 

typeof myName; // 返回 "string" 
myName = true; 

typeof myName // 返回 "boolean" 





2. 变量 提升 
在 我 们 印象 里 ， 浏 览 器 会 从 上 到 下 依次 执行 JavaScript 代码 。 但 有 时 候 也 不 一 定 ! 
比如 ， 下 面 这 些 代 码 ， 你 觉得 变量 i 什么 时 候 有 定义 ? 

Var numLoops = 100; 

for (var i = 0; i < numLoops; i++) { 


console.1log(i); 


} 


在 其 他 很 多 语言 中 ，i 会 到 for 循环 开始 时 才 被 声明 ， 这 符合 我 们 的 预期 。 但 由 于 
存在 一 种 叫做 变量 提升 的 机 制 ，JavaScript 中 的 变量 声明 会 被 提升 到 函数 上 下 文 的 
顶部 。 对 于 前 面 的 例子 来 说 ，i 实际 上 在 for 循环 开始 之 前 就 有 了 定义 。 下 面 的 代 
码 跟 上 面 的 代码 是 等 价 的 : 





Var numLoops = 100; 
Var i; 
for (i = 0; i < numLoops; i++) { 


console.1og(i); 


} 


如 果 变 量 名 字 有 冲突 ， 变 量 提升 可 能 就 会 带 来 问题 。 因 为 你 本 以 为 某 个 变量 到 后 面 
才 会 有 定义 ， 不 成 想 它 早 在 代码 一 开始 执行 时 就 有 定义 了 。 


3. 函数 级 作用 域 

在 编程 领域 ， 变 量 作用 域 这 个 概念 用 于 区 分 在 哪个 环境 下 可 以 访问 哪些 变量 。 一 般 
来 说 ， 在 任何 地 方 都 能 访问 任何 值 是 不 正确 的 。 因 为 这 样 发 生 冲 突 的 可 能 性 太 高， 
或 者 不 知道 在 哪儿 意外 改 了 某 个 值 ， 都 会 让 你 急 得 疯 掉 。 


很 多 语言 都 有 块 级 作用 域 ， 也 就 是 在 当前 “ 块 ”中 ， 变 量 才 有 定义 。 这 里 的 “ 块 ”， 
通常 就 是 花 括 号 。 在 块 级 作用 域 下 ， 前 面 例子 中 的 变量 i 将 只 存在 于 for 循环 中 。 
如 果 想 在 循环 外 部 读 取 或 修改 i 的 值 ， 都 会 失败 。 这 样 其 实 挺 好 ， 因 为 你 知道 循环 
中 的 变量 不 会 跟 循 环 外 部 的 其 他 变量 有 冲突 。 

但 是 ，JavaScript 中 的 变量 只 能 限制 在 函数 中 ， 即 在 函数 (而 不 是 任何 块 ) 中 声明 
的 变量 只 能 在 函数 内 部 访问 。 

假如 你 使 用 过 其 他 语言 ， 那 么 对 这 一 点 必须 格外 注意 。 关 键 要 记 住 : 要 想 封 闭 某 个 
值 ， 就 得 把 它们 放 到 函数 里 。 

4. 全 局 命名 空间 

说 到 变量 冲突 ， 请 帮 我 个 忙 ， 打开 任意 网 页 ， 调 出 JavaScript 控制 台 ， 输 入 window， 
然后 单 击 那 个 灰色 三 角形 ， 看 看 里 面 都 有 什么 。 
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我 知道 你 就 像 进 入 了 迷宫 一 样 ， 而 这 正 是 所 谓 的 “全 局 命名 空间 ”， 真 是 “ 百 闻 不 如 
一 见 ”( 参 见 图 3-10)。 
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》 window 
Window 
Infinity: Infinity 
pArray: function Array() { [native code] } 
ArrayBuffer: function ArrayBuffer() { [native code] } 
pAttr: function Attr() { [native code] } 
Audio: [object Function] 
AudioprocessingEvent: function AudioprocessingEvent{) { [native code] } 
BeforeLoadEvent: function BeforeLoadEvent() { [native code] } 
bp Blob: function Blob() { [native code] } 
w Boolean: function Boolean() { [native code] } 
yb CDATASection: function CDATASection() { [native code] } 
CSSCharsetRuLe: function CSSCharsetRule() { [native code] } 
bp CSSFontFaceRule: function CSSFontFaceRute() { [native code] } 
* CSSImportRuLe: function CSSImportRule() { [native code] } 
CSSMediaRuLe: function CSSMediaRule() { [native code] } 
* CSSPageRule: function CSSPageRule() { [native code] } 
b CSSPrimitiveValue: function CSSPrimitiveValue() { [native code] } 
* CSSRuLe: function CSSRule() { [native code] } 
* CSSRuLeList; function CSSRuleList() { [native cogde] } 
pCSsstyleDeclaration: function CSSStyleDeclaration() { [native code] } 
pCssstyleRule: function CSSStyleRule() { [native code] } 
= CSSStyLeSheet: function CSSStyleSheet() { [native code] 上 
* CSSVatue: function CSSVatue() { [native code] } 
bp CSSValueList: function CSSValueList() { [native code] } 
* CanvasGradient: function CanvasGradient() { [native code] } 
bk CanvasPattern: function CanvaspPatternt) { [native code] } 
= CanvasRenderingContext2D: function CanvasRenderingContext2D() { [native code] } 
* CharacterData: function CharacterData() { [native code] } 
pClientRect: function ClientRect() { [native code] } 
pClientRectList: function ClientRectList() { [native code] } 
* ClLipboard: function Clipboard() { [native code] } 
pCloseEvent: function CloseEvent() { [native code] } 
p Comment: function Comment()} { [native codel] } 
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window 在 浏览 器 中 是 一 个 顶级 对 象 ， 包 含 所 有 JavaScript 中 能 直接 访问 到 的 对 
象 。 你 看 到 的 所 有 这 些 对 象 和 值 都 包含 在 全 局 作用 域 中 。 换 句 话说 ， 如 果 你 每 次 都 
在 全 局 作用 域 中 声明 新 变量 ， 那 这 个 变量 就 会 被 加 到 winaow HR 个。 正 像 一 
JavaScript 界 敢 于 仗义 直言 的 人 所 说 :“ 你 这 是 在 污染 全 局 命名 空间 。 (奇怪 的 是 ， 
很 多 在 论坛 里 义 正 词 严 说 这 种 话 的 人 ， 在 现实 当中 都 很 平易 近 人 。) 











比如 ， 我 们 在 控制 台中 输入 : var zebras = "amazingn。 


然后 ， 再 输入 window， 点 开 灰 色 小 三 角 ,， 一 直 向 下 演 动 ， 深 动 到 最 底部 ， 就 会 看 
到 zepras， 如 图 3-11 所 示 。 











e 9 日 ) (ylocalhost/book/images/3/ x WY» = 





€ = | [Y localhost/book/images/3/references/simple_html_example.html se A 


Amazing Visualization Tool Cures All Hls 
x) 国 tements (| Resources 全 emork 05 sources (人 Tinaine (CT Pofes (avis | econ 


pscrollbars: BarInfo 
bself: Window 
b sessionStorage: Storage 
status: "™ 
b statusbar: BarInfo 
b styleMedia: StyleMedia 
w toolbar: BarInfo 
top: Window 
undefined: undefined 
* unescape: function unescape() { [native code] } 
wvBIntl: Object 
b webkitAudioContext: function AudioContext() { [native code] } 

















bp webkitAudioPannerNode: function PannerNode() { [native code] } 
* webkitIDBCursor: function IDBCursor() { [native code] } 
b webkitIDBDatabase: function IDBDatabase() { [native code] } 
wwebkitIDBDatabaseException: function IDBDatabaseException() { [native code] } 
b webkitIDBFactory: function IDBFactory() { [native code] } 
wwebkitIDBIndex: function IDBIndex() { [native code] 上 
b webkitIDBKeyRange: function IDBKeyRange() { [native code] } 
bwebkitIDBObjectStore: function IDBObjectStore() { [native code] } 
bwebkitIDBRequest: function IDBRequest() { [native code] } 
wwebkitIDBTransaction: function IDBTransaction() { [native code] 上 
* webkitIndexedDB: IDBFactory 
bwebkitMediaStream: function MediaStream() { [native code] } 
b webkitNotifications: NotificationCenter 
wwebkitRTCPeerConnection: function RTCPeerConnection() { [native code] } 
> webkitStorageInfo: StorageInfo 
yb webkitURL: function URL() { [native code] } 
Pp window: Window 

zebras: "amazing" 
pb __proto__: Window 


四 江 QQ A <topframe>Y <page context> v CD | Errors Warnings Logs Ee 


2 











3-11: 全 局 作用 域 中 有 了 zebras 


(让 人 不 解 的 是 ， 在 JavaScript 中 不 使 用 标准 的 var 也 可 以 定义 新 变量 。 因 此 ， 只 要 
输入 zebras = "amazing" 也 会 得 到 与 前 面相 同 的 结果 。) 


给 window 增加 几 个 值 有 什么 大 问题 吗 ? 刚 开 始 的 时 候 ， 啥 事 儿 也 没有 。 但 随 着 你 
的 项 目 越 来 越 复杂 ， 特 别 是 在 需要 联合 使 用 非 D3 的 JavaScript 代码 时 (如 jQuery、 
Facebook 的 “Like” 按 钮 ， 或 谷歌 的 分 析 跟 踪 代 码 )， 说 不 定 就 会 发 生命 名 冲突 。 
比如 ， 你 在 自己 的 项 目 里 使 用 了 变量 zebras， 而 zebraTracker.js 恰好 也 使 用 了 一 个 
同名 变量 ! 结果 肯定 是 一 团 糟 。 至 少 ， 一些 不 太 规 范 的 数据 ,很 有 可 能 导致 你 的 代 
码 发 生 异 常 或 错误 。 


解决 这 个 问题 有 两 个 简单 的 办 法 (说明 一 下 ， 不 到 后 面 你 不 用 担心 这 一 点 )。 


只 在 函数 里 面 声明 变量 。 虽 然 有 时 候 也 不 是 绝对 可 行 ， 但 函数 级 作用 域 可 以 防止 
其 本 地 变量 跟 其 他 变量 发 生 冲 突 。 
。 只 声明 一 个 全 局 对 象 , 然后 把 你 本 来 想 作 为 全 局 变量 的 值 都 作为 这 个 对 象 的 属性 。 
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比如 : 
var Vis = {}; // 声明 空 的 全 局 对 象 


Vis.zebras = "still pretty amazing"; 
Vis.monkeys = "too funny LOL",; 
Vis.fish = "you know, not bad"; 


这 样 ， 所 有 变量 就 都 被 “ 关 在 党 子 里 了 ”( 在 这 里 就 是 全 局 对 象 Vis 里 )， 因 此 
不 会 再 污染 全 局 命名 空间 。 当 然 ， 不 一 定 非得 叫 vis， 叫 什么 随 你 便 一 一 不 过 叫 
Menagerie (动物 园 ) 输入 起 来 就 太 麻 烦 了。 无 论 如 何 ， 如 果 再 有 冲突 发 生 ， 那 肯 
定 是 其 他 脚本 里 也 恰好 有 一 个 全 局 对 象 ， 而 且 也 起 了 个 相同 的 名 字 (vis)。 但 这 种 
事 儿 发 生 的 概率 就 低 得 多 了 。 











3.8 SVG 


D3 最 适合 用 来 生成 和 操作 SVG (Scalable Vector Graphics， 可 伸缩 矢量 图 形 )。 通 
过 aiv 和 其 他 原生 HTML 元 素 也 没 问题 ,但 总 是 略 显 笨重， 而 且 会 遭遇 浏览 器 间 不 
一 致 的 问题 。 使 用 SVG 更 加 可 靠 ， 图 形 效 果 更 一 致 ， 而 且 速度 也 更 快 。 


图 3-12 展示 了 一 个 小 圆 形 ， 对 应 的 SVG 代码 在 下 面 。 




















3-12: 小 SVG 贺 形 


<svg width="50" height="50"> 
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/> 
</svg> 
可 以 使 用 Illustrator 等 矢量 生成 软件 来 生成 SVG 文件 ， 但 我 们 要 学 习 的 是 如 何 通过 
代码 来 生成 它们 。 


3.8.1 SVG 元 素 


SVG 是 一 种 文本 格式 。 每 个 SVG 图 形 都 是 使 用 与 HTML 类 似 的 标记 定义 的 ， 而 且 
SVG 代码 可 以 直接 包含 在 HTML 文档 中 ， 或 者 动态 插入 到 DOM 中 。 除 了 IE8 及 之 
前 版 本 之 外 ， 所 有 浏览 器 都 支持 SVG。SVG 也 是 一 种 XML 语言 ， 所 以 那些 不 包含 
结束 标签 的 元 素 ， 一定 要 自 关闭 。 比 如 : 





<element></element> <!-- 带 关 闭 标 签 --> 


<element/> <!-- 自 关闭 元 素 --> 
在 学 习 绘 图 之 前 ， 首 先 得 创建 SVG 元 素 。 可 以 把 SVG 元 素 想 象 成 一 个 可 以 在 上 
面 作画 的 画布 。( 从 这 个 意义 上 说 ，SVG 与 HTML 中 的 canvas 元 素 相 像 。) 至 少 
要 给 新 SVG 元 素 指 定 width 和 height 值 。 如 果 不 指定 ，SVG 就 会 像 典型 的 块 级 
HTML 元 素 一 样 ， 贪 禁地 在 包含 它 的 元 素 内 尽 可 能 地 扩大 地 盘 。 




















<svg width="500" height="50"> 
</svg> 














注意 ， 像 素 是 默认 的 度量 单位 ， 因 此 可 以 只 指定 500 和 50， 而 不 是 500px 和 
50px。 当 然 也 可 以 明确 地 给 出 单位 ， 除 了 像素 之 外 ， 支 持 的 其 他 单位 还 包括 em、 


pt、in、cm 和 mm。 


























3.8.2 简单 的 图 形 
在 svg 标签 中 可 以 租 入 很 多 可 见 的 元 素 ， 包 括 rect、circle、ellipse、line、 
text 和 path。 























如 果 你 熟悉 计算 机 图 形 编程 ， 那 肯定 知道 基于 像素 的 坐标 系统 的 原点 ( 即 0,0 点) 
位 于 画布 的 左上 角 。 增 大 x 的 值 ， 图 形 会 向 右 移 动 ， 增 大 y 值 ， 图 形 会 向 下 移动 
(参见 图 3-13)。 



































0,0 





@ 
100,20 
@ 
200,40 











图 3-13: SVG 坐标 系统 


rect 用 于 绘制 矩形 。x 和 y 用 于 指定 矩形 左上 角 的 坐标 ， 而 wiath 和 height 用 于 
指定 其 大 小 。 下 面 这 个 矩形 会 填 满 SVG 元 素 的 整个 空间 ， 如 图 3-14 所 示 。 





rect. Xa"O var widths Soo height="50"/> 


3-14: SVG 矩形 

















circle 用 于 绘制 圆 形 。cx 和 cy 用 于 指定 圆心 坐标 ， 而 r+ 用 于 指定 半径 。 下 面 这 
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个 圆 形 在 500 像素 宽 的 SVG 画布 上 居中 ， 因 为 其 cx (center-x， 即 圆心 x 坐标 ) 值 
等 于 250， 参 见 图 3-15。 














3 








<circle cx="250" Cy="25" r="25"/> 

















3-15: SVG 圆 形 





ellipse 与 circle 类 似 ， 只 不 过 每 个 轴 要 分 别 指定 半径 。 因 此 ， 半 径 属 性 不 再 是 
xz， 而 是 rx 和 zy， 结果 如 图 3-16 所 示 。 
































<ellipse cx="250" cy="25" rx="100" ry="25"/> 

















3-16: SVG 椭圆 形 


line 用 于 绘制 直线 ， 如 图 3-17 所 示 。x1 和 yl 用 于 指定 起 点 坐标 ，x2 和 y2 用 于 
指定 终点 坐标 。 另 外 ， 必 须 用 stroke 指定 直线 的 颜色 才能 看 得 见 。 








<line x1l="0" yl="0" x2="500" y2="50" stroke="black"/> 


i 


3-17: SVG 直线 


text 用 于 绘制 文本 。x 用 于 指定 文本 左上 角 的 位 置 ，y 用 于 指定 字体 的 基线 位 置 。 
(基线 是 印刷 术语 ， 指 文本 中 一 条 不 可 见 的 线 ， 所 有 字母 都 以 之 为 基准 对 齐 。“p” 和 
“y” 这 样 的 字母 会 伸 到 基线 以 下 ， 伸 出 的 部 分 叫 下 伸 部 分 。) 以 下 代码 会 得 到 如 图 
3-18 所 示 的 结果 。 

















<text x="250" y="25">Easy-peasy</text> 
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Easy-peasy 











图 3-18: SVG 文本 





SVG 文本 会 继承 CSS 为 父 元 素 指定 的 字体 样式 ， 除 非 另 有 指定 。( 关 于 给 文本 添加 样 
式 ， 我 们 稍 后 再 介绍 。) 要 履 盖 继承 的 样式 ， 可 以 像 下 面 这 样 ， 结 果 如 图 3-19 所 示 。 








<text x="250" y="25" font-family="sgerif" font-=size="25" 
fill="gray">Easy-peasy</text> 





Easy-peasy 











图 3-19: 指定 SVG 文本 的 样式 

还 要 注意 一 点 ， 要 防止 任何 可 见 的 元 素 跑 到 SVG 画布 外 面 ， 否 则 会 被 切 掉 。 特 别 
是 对 于 文本 ， 英 文字 母 的 下 伸 部 分 一 不 小 心 就 会 跑 出 去 。 图 3-20 展示 了 这 样 一 种 情 
况 ， 因 为 基线 (y) 被 设置 为 50， 与 SVG 画布 高 度 一 样 。 











<text X="250" y="50" font-family="serif" font-size="25" 
fill="gray">Easy-peasy</text> 








Easv-Deasyv 








图 3-20: SVG 文本 跑 出 去 了 


path 用 于 绘制 前 面 图 形 之 外 的 其 他 复杂 图 形 (如 地 图 上 的 国境 线 )， 后 面 我 们 会 单 
独 介绍 。 本 市 只 介绍 简单 的 图 形 。 











3.8.3 为 SVG 元 素 添加 样式 
SVG 的 默认 样式 是 黑色 填充 ,没有 描 边 。 如 果 你 想 添加 其 他 样式 ， 必 须 自己 给 元 素 
添加 。 常 见 的 SVG 属性 有 下 面 这 些 。 








。 fill 
颜色 值 。 与 使 用 CSS 一 样 ， 可 以 使 用 颜色 名 、 十 六 进 制 值 ， 或 RGB、RGBA 值 。 


。 stroke 


颜色 值 。 
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。 stroke-width 


HE 


带 单位 的 数值 (通常 单位 是 像素 )。 





。 opacity 


0.0 〈 完 全 透明 ) 到 1.0 (完全 不 透明 ) 之 间 的 数值 。 
对 于 文本 ， 也 可 以 使 用 下 面 这 些 属性 ， 使 用 方式 与 CSS 中 类 似 。 


。 font-family 


。 font-size 


男 一 个 与 CSS 类 似 的 地 方 ， 是 可 以 通过 两 种 方式 给 SVG 元 素 应 用 样式 : 作为 元 素 
属性 直接 应 用 (行内) 或 使 用 CSS 样式 规则 。 


以 下 是 通过 属性 方式 给 圆 形 应 用 样式 的 例子 ， 结 果 如 图 3-21 所 示 。 





<circle cx="25" Cy="25" r="22" 
fill="yellow" stroke="orange" stroke-width="5"/> 

















3-21: SVG 圆 形 





另外 ， 也 可 以 删除 所 有 样式 属性 ， 通 过 article 类 来 为 它 定义 样式 (就 像 给 其 他 
HTML 元 素 应 用 样式 一 样 ) : 

















<circle cx="25" Gy="25" r=s"22" clags="pumpkin'"/> 


在 样式 规则 中 ， 使 用 同样 的 f11、stroke 和 stroke-width 属性 定义 这 个 类 的 
样式 : 





.pumpkin { 
fill: yellow; 
stroke: orange; 
stroke-width: 5; 


} 
CSS 方式 有 以 下 两 个 明显 的 好 处 : 


。 可 以 只 写 一 次 样式 ， 然 后 把 它们 应 用 给 多 个 元 素 ; 
。 CSS 代码 比 行内 属性 容易 看 懂 。 
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。 正 因为 如 此 ，CSS 方式 更 便于 维护 ， 也 可 以 更 快 地 修改 设计 。 


， 有 上 时候 通过 CSS 给 SVG 应 用 样式 会 令 人 不 太 放 心 。 因 为 f11、stroke 和 
stroke-widthn 都 不 是 CSS 属性 。( 最 相近 的 CSS 属性 是 background-color 和 
border。) 而 我 们 只 是 在 利用 CSS 选择 符 来 应 用 SVG 专 有 的 属性 。 为 了 方便 区 分 
哪些 样式 规则 是 应 用 给 SVG 的 ， 可 以 考虑 在 选择 符 中 增加 svg 标记 : 








svg .pumpkin { 
HE so 
} 
3.8.4 ”分 层 与 绘制 顺序 
SVG 中 没有 “ 层 ” 和 深度 的 概念 ， 也 不 支持 CSS 的 z-index 属性 ， 因 此 属性 只 能 
在 二 维 画 布 表 面 上 排 布 。 


不 过 ， 如 果 要 绘制 多 个 图 形 ， 它 们 是 会 重合 的 : 





<rect x="0" y="0" width="30" height="30" fill="purple"/> 
<rect x="20" y="5" width="30" height="30" fill="blue"/> 
<rect x="40" y="10" width="30" height="30" fill="green"/> 
<rect x="60" y="15" width="30" height="30" fijll="yellow"/> 
<rect x="80" y="20" width="30" height="30" fill="red"/> 


代码 中 元 素 出 现 的 顺序 决定 了 它们 的 深度 次 序 。 在 图 3-22 中 ， 紫 色 | 方 
形 在 代码 中 出 现 得 最 早 ， 因 此 浏览 器 首先 绘制 它 。 然 后 ， 在 它 的 “上 面 ”绘制 蓝 色 
(blue) 方形 。 接 着 依次 是 绿色 、 黄 色 和 红色 的 方形 。 




















3-22: SVG 元 素 重 敬 


可 以 把 浏览 器 绘制 SVG 图 形 想象 成 在 画布 上 作画 。 后 涂 的 油漆 会 使 先 涂 的 油漆 变 模 
糊 ， 因 此 出 现在 了 “前 面 ”。 


在 需要 同时 绘制 多 个 视觉 元 素 ， 但 又 不 想 让 它们 相互 遮盖 时 ， 绘 制 的 顺序 至 关 重 要 。 
比如 ， 我 们 需要 给 散 点 图 画 上 数 轴 和 数值 标签 ， 那 么 可 以 在 SVG 中 最 后 再 添加 数 轴 
和 标签 ， 这 样 它们 就 可 以 出 现在 其 他 元 素 前 面 。 
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3.8.5 ”透明度 
在 元 素 相 互 遮 挡 ， 但 又 不 能 完全 遮 住 先 绘制 的 元 素 时 ， 或 者 想 弱 化 某 些 元 素 而 突出 
显示 其 他 元 素 时 ， 透 明度 效果 扮演 着 重要 角色 ， 如 图 3-23 所 示 。 


有 两 种 应 用 透明 度 的 方式 : 或 者 使 用 带 透 明 通道 的 RGB 值 ， 或 者 设置 opacity 
(不 透明 度 ) 值 。 


可 以 在 为 fl1 或 stroke 属性 指定 颜色 的 时 候 使 用 *gba() 。rgba() 接受 0 到 255 
(包含 及 ) 之 间 的 三 个 值 ， 分 别 代 表 红 、 绿 、 蓝 ， 还 接受 第 四 个 0.0 到 1.0 (包含 及 ) 
之 间 的 透明 度 值 。 


«eirele: cx="25" ey="25" Fa"20r 有 1TL=g5a(1287 0, 128, 150) /3S 
Girele Cx="50" ty="25" FE="20" fills"rgba(0;, 0 255; 0.75)"/> 
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/> 
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/> 
eireLe Cx 125" Gy" T=-"20" Hiil=srgba(2ss, Or OO, OT)Y/S 




















3-23: RGBA SVG 图 形 


使 用 z*gba() 可 以 分 别 为 填充 (fi11) 和 描 边 (stroke) 颜色 应 用 透明 度 。 下 面 几 
个 圆 形 填充 都 是 75% 不 透明 ， 而 它们 的 描 边 都 只 有 25% 不 透明 : 
elrele ‘Cx="25r GE 25 Fan20l HlLlaveoba(l28, 0, L288. Os75)" 
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/> 
<circle cx="75" cy="25" r="20" fll="rgba(0, 255, 0, 0.75)" 
stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/> 


Girele: Cxs"125" Cyan"25" Fara0n Hillavrgba(255; ‘255, 0 O75)™" 
stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/> 


应 用 透明 度 之 后 ， 可 以 得 到 图 3-24 所 示 的 结果 。 描 边 与 每 个 圆 形 的 边缘 对 齐 ， 既 不 
完全 位 于 圆 形 内 部 ， 也 不 完全 位 于 圆 形 外 部 ， 而 是 一 半 在 内 一 半 在 外 。 在 应 用 了 透 
明度 之 后 ， 每 个 10 像素 的 描 边 看 起 来 倒 像 是 两 个 5 像素 的 描 边 一 样 。 


























3-24: RGA SVG 图 形 中 的 填充 和 描 边 





| 大 
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邮 








要 给 整个 元 素 应 用 透明 度 ， 可 以 设置 opacity 属性 。 图 3-25 展示 了 几 个 完全 不 透 
明 的 圆 形 。 

















3-25: 完全 不 透明 的 圆 形 
图 3-26 展示 了 同样 的 圆 形 但 设置 了 opacity 值 的 效果 : 





<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" 
opacity="0.9"/> 

<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" 
opacity="0.5"/> 

<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10" 
opacity="0.1"/> 

















3-26: 部 分 透明 的 圆 形 


也 可 以 对 已 经 使 用 rgpa () 设置 了 颜色 的 元 素 应 用 opacity 属性 。 这 时 候 ， 透 明度 
值 会 相 乘 。 图 3-27 所 示 的 三 个 圆 形 的 £11 和 stroke 分 别 使 用 了 相同 的 RGBA 值 。 
而 且 除 第 一 个 圆 形 外 ， 另 外 两 个 都 设置 了 opacity 值 : 








<circle cx="25" Cy="25 rs"20" fill="rgba(1i28, 0, 128;, 0,75)" 
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/> 

<circle cx="65" Cy="25" Y="20" fill="rgba(128, 0, 128, 0.75)" 
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/> 

<circle cx="105" ey="25" Y="20" fill="rgba(128, 0, 128, 0.75)" 
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/> 

















3-27:， RGBA 与 opacity 相 乘 的 效果 
以 第 三 个 圆 形 为 例 ， 其 opacity 值 是 0.2 ( 即 20%)。 而 其 紫色 的 fl1l 值 中 的 透 
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明 通 道 值 是 0.75 ( 即 75%)。 结 果 ， 紫 色 区 域 最 终 的 透明 度 就 是 0.2 x 0.75 = 0.15 
( 即 15% ) 。 


3.9 关于 兼容 性 


旧版 本 浏览 器 不 支持 SVG。 正常 情况 下 ，IE8 及 更 早 版 本 不 会 显示 SVG 图 形 。 有 时 
候 确 实 有 点 讨厌 ， 因 为 本 该 华丽 无 比 的 图 形成 了 一 片 空白 。 而 且 ，D3 本 身 也 不 支持 
旧版 本 浏览 器 (当然 ， 主 要 是 IE8 及 更 早 版 本 )。 总 之 ， 两 者 简直 形 同 水 火 ， 更 谈 不 
上 兼容 性 了 。 











AD3 可 以 在 IE8 中 运行 ， 但 更 早 版 本 的 IE 就 不 行 了 。r2d3 (https://github. 
com/mhemesath/r2d3/) 是 D3 整合 Raphagsl (http://raphaeljs.com/) 的 图 形 
绘制 功能 后 一 个 版 本 ， 可 以 尽 可 能 兼容 IE7。 





2 在 配合 使 用 Aight 兼容 库 (https://github.com/shawnbot/aight) 的 情况 下 ， 
a、 
4 








当然 ， 最 好 的 办 法 还 是 鼓励 人 们 升级 ， 或 者 选择 最 近 几 年 才 流行 的 浏览 器 。 使 用 现 
代 浏 览 器 的 人 越 多 ， 他 们 的 上 网 体验 也 就 越 好 ， 而 我 们 潜在 的 用 户 也 就 越 广 。 


换 句 话说 ， 告 诉 用 户 为 什么 这 个 功能 不 能 用 是 对 用 户 的 尊重 。 建 议 使 用 Modernizr 
(http://modernizr.com/) 或 类 似 的 JavaScript 工具 检测 浏览 器 是 否 支持 SVG。 如 果 
支持 ， 就 加 载 D3 代码 ， 并 正常 处 理 ， 否 则 ， 就 显示 静态 的 非 交 互 性 的 图 表 ， 同 时 
附 上 一 段 说 明 ， 解 释 为 什么 需要 较 新 版 本 的 浏览 器 。( 措 词 一 定 要 委婉 ， 同 时 提供 
Chrome 和 Firefox 下 载 页 面 的 链接 。 我 以 前 也 提供 下 载 Safari 的 链接 ， 但 苹果 后 来 
将 其 整合 到 了 Mac OS 中 ， 不 再 提供 单独 下 载 了 。) 


举 个 例子 ， 可 以 使 用 Modernizr.1load() 检查 Modernizr 测试 的 结果 。 如 果 测 
试 通过 (比如 检测 到 浏览 器 支持 SVYG)， 则 告诉 Modernizr 加 载 D3 和 你 自己 的 
JavaScript 代码 。 我 一 般 会 在 文档 的 -nead> 标签 中 放 如 下 代码 : 











<script src="js/modernizr.js"></script> 


<script type="text/javascript"> 
Modernizr.1load({ 
test: Modernizr.svg && Modernizr.inlinesvg, 
yep : [ 'js/d3.v3.min.js', 
'js/script.js' ] 
es 


</script> 


首先 加 载 Modernizr， 执 行 检测 ， 然 后 只 在 测试 成 功 的 情况 下 才 加 载 其 他 代码 ( 即 
yep 部 分 )。 至 于 检测 失败 后 显示 什么 ， 可 以 使 用 CSS 或 其 他 JavaScript 脚本 ， 也 可 
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六 显示 一 幅 静 态 图 表 和 鼓励 用 户 尝试 新 浏览 器 的 几 句 话 。 要 了 人 解 如 何 通过 Modernizr 
实现 这 些 ， 可 以 参考 它 的 文档 ， 地 址 : http://modernizr.com/docs/ 机 oad。 


1 


caniuse.com 也 是 一 个 非常 难得 的 资源 ， 通 过 它 可 以 查询 浏览 器 支持 哪些 特性 ， 以 及 
哪些 浏览 器 支持 SVG (http://caniuse.com/#search=svg)。 


有 人 也 尝试 让 D3 在 老 版 本 浏览 器 中 运行 ， 有 时 候 需 要 混合 使 用 Raphaél 在 canvas 
上 泻 染 ,或 者 使 用 其 他 偏 门 技术 。 虽 然 技术 上 不 是 不 可 能 ， 但 我 不 推荐 这 么 做 。 
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安装 D3 是 非常 简单 的 ， 只 要 下 载 它 的 最 新 版 本 ， 新 建 一 个 空 页 面 来 写 代 码 ， 最 后 
再 设置 一 下 本 地 服务 器 就 好 了 。 


4.1 下 载 D3 
先 创建 一 个 新 文件 夹 ， 保 存 项 目 文件 。 文 件 夹 的 名 字 随 便 起 ， 建 议 叫 project-folder。 


在 这 个 文件 夹 里 ， 最 好 再 建 一 个 子 文件 夹 叫 d3。 然 后 把 下 载 的 D3 的 最 新 版 本 保存 
在 这 个 子 文件 夹 里 。 因 为 D3 下 载 下 来 是 个 ZIP 文件 ， 所 以 要 把 它 解 压缩 。 在 写作 
本 书 时 ，D3 的 最 新 版 本 是 3.0.6 (http://d3js.org/d3.v3.zip)。 








D3 还 提供 了 一 个 “瘦身 ”版 本 d3.v3.min.js (http://d3js.org/d3.v3.min.js)， 由 于 去 
掉 了 空格 ， 体 积 更 小 ， 加 载 速 度 也 更 快 。 虽 然 功能 都 一 样 ， 但 在 开发 项 目 时 最 好 还 
是 用 正常 的 版 本 (为 了 调试 方便 ) ， 等 项 目 可 以 对 外 公开 发 布 时 再 换 成 缩小 版 (为 
了 减少 浏览 器 加 载 的 时 间 )。 到 底 用 哪 一 个 还 是 你 说 了 算 ， 反 正本 书 会 使 用 标准 版 。 


另外 ， 还 可 以 下 载 整个 D3 代码 库 (https://github.com/mbostock/d3/zipball/master)， 
其 中 不 光 包 含 JavaScript 文件 ， 还 有 各 种 源 代码 文件 。 可 以 先 浏览 一 下 代码 库 
(https://github.com/mbostock/d3)， 或 干脆 直接 把 整个 压缩 文件 下 载 下 来 。 当 然 ， 全 
都 下 载 完 了 ， 还 要 把 其 中 的 d3.v3.js 复制 到 project-folder/d3/ 里 。 








59 


4.2 引用 D3 


接 下 来 ， 在 项 目 文件 夹 里 创建 一 个 HTML 页 面 ， 命 名 为 index.html。 记 住 ，HTML 
文档 就 是 普通 的 纯 文 本 文件 。TextEdit 和 Notepad 等 文本 编辑 器 都 可 以 ， 但 最 好 是 
找 一 个 专门 为 编码 设计 的 ， 比 如 Coda、Espresso 或 Sublime Text (还 有 很 多 很 多 ) 。 


如 果 在 保存 时 编辑 器 提供 了 文件 编码 选项 ， 选 择 Unicode (UTF-8)。 
现在 ， 文 件 夹 的 结构 如 下 所 示 : 





project-folder/ 
d3/ 
d3.v3.js 
d3.v3.min.js (optional) 
index.html 


把 下 面 的 代码 粘贴 到 新 建 的 HTML 文件 中 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3 Page Template</title> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 


// 你 的 D3 代码 
</script> 
</body> 
</html> 
如 果 这 点 事 都 不 想 做 ， 可 以 直接 下 载 本 书 示 例 代码 文件 (参见 第 1 章 )， 找 到 01_ 
empty_page_template.html， 其 中 的 代码 与 上 面 的 完全 相同 (但 src 路 径 里 D3 的 版 
本 号 可 能 不 一 样 ， 你 得 自己 改 成 正确 的 )。 


关于 这 个 模板 ， 有 以 下 几 点 说 明 。 


。 meta 标签 注 明 文件 的 编码 为 utf-8， 这 是 确保 浏览 器 正确 解析 D3 的 功能 和 数据 
的 关键 ， 

。 第 一 个 script 标签 设 定 了 对 d3.v3.js 的 引用 。 如 果 你 想 使 用 缩小 版 或 加 载 保 存 
在 其 他 地 方 的 D3 文件 ， 就 需要 修改 这 里 的 文件 路 径 。 

。 第 二 个 script 标签 在 body 中 ， 是 你 编写 代码 的 地 方 。 相 信 我 ， 你 的 代码 一 会 


2 日 ya 证- 
很 漂亮 。 


完成 ! D3 模板 文件 和 文件 夹 都 各 就 各 位 了。 如果 你 以 后 还 想 创建 其 他 项 目 ， 可 以 
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把 这 个 模板 项 目 完 整地 复制 过 去 。 


4.3 配置 Web 服 务 器 


有 时候 ， 可 以 直接 在 浏览 器 中 查看 本 地 HTML 文件 。 但 出 于 安全 方面 的 考虑 ， 某 些 
浏览 器 可 能 会 限制 JavaScript 加 载 本 地 文件 。 这 样 的 话 ， 如 果 D3 代码 需要 加 载 外 部 
的 数据 文件 (如 CSV 或 JSON)， 那 就 会 出 问题 了 。 但 这 不 是 D3 的 问题 ， 而 是 浏览 
器 在 阻止 加 载 来 自 第 三 方 不 受信 任 站 点 的 脚本 和 其 他 外 部 文件 。 


为 了 解决 这 个 问题 ， 更 可靠 的 方案 是 把 页 面 放 到 Web 服务 器 上 。 建 议 大 家 在 本 机 
(也 就 是 你 眼前 这 台电 脑 ) 上 安装 一 个 Web 服务 器 软件 ， 这 样 比 使 用 远程 Web 服务 
器 更 方便 也 更 快捷 。 本 地 计算 机 作为 服务 器 ， 托 管 并 向 自己 提供 文件 好 像 有 点 奇怪 。 
你 可 以 这 么 想 啊 ， 浏 览 器 和 Web 服务 器 是 两 个 程序 ， 前 者 向 后 者 请 求 文件 ， 后 者 为 
前 者 提供 服务 。 


实际 上 ， 在 本 机 上 安装 Web 服务 器 非常 容易 。 以 下 介绍 儿 种 方式 。 

















4.3.1 基于 Python 的 文本 终端 方案 

如 果 你 使 用 的 是 Mac OS X 或 Linux， 那 已 经 安装 了 Python。 只 要 你 熟悉 在 文本 终 
端 中 输入 合集 ， 就 可 以 直接 运行 一 个 基于 Python 的 迷你 服务 器 。 这 绝对 是 最 简便 的 
方法 。( 如 果 你 使 用 Windows， 得 先 安装 Python 才 行 。) 

要 使 用 Python， 打 开 系 统 中 的 终端 窗口 。 在 Mac 上 上， 打开 Terminal 程序 ， 一 般 是 


在 Utilities 文件 夹 下 。 或 者 ， 直 接 在 Spotlight (屏幕 右上 角 的 放大 镜 菜 单 ) 中 直接 
输入 Terminal。Linux 用 户 天 生 知 道 怎么 打开 终端 窗口 ， 因 此 我 就 不 浪费 笔墨 了 。 











运行 Python 服务 器 的 步骤 如 下 。 


1. 打开 一 个 新 的 终端 窗口 。 

2. 在 命令 行 中 找到 你 想 要 公开 的 文件 夹 。 假 如 你 的 项 目 文件 夹 在 Mac 的 Desktop 文 
件 夹 里 ， 可 以 输入 : cq ~/Desktop/project-folder。 

3. 再 输入 python -m SimpleHTTPServer 8888 &。 





(以 上 命令 在 Python 2.x 中 可 以 使 用 ， 但 Python 3.0 及 更 新 版 本 已 经 去 掉 了 
SimpleHTTPServer。 对 Python 3.x， 只 要 把 命令 中 的 simpleHTTPServer 赫 换 成 
httpbp.setrvet 即 可 。) 





这 样 就 能 在 8888 端口 激活 服务 器 。 切 换 到 浏览 器 ， 访 问 以 下 URL: http:// 
localhost:8888/。 没 错 ， 不 用 输入 www.something.com 之 类 的 网 址 ， 只 要 使 用 
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localhost 即 可 ， 它 的 意思 是 让 浏览 器 请 求 位 于 本 机 上 的 页 面 。 


然后 就 会 看 到 一 个 空 的 “D3 Page Template” 页 面 。 因 为 页 面 的 主体 是 空 的 ， 所 以 
在 浏览 器 中 什么 也 看 不 到 。 选 择 “ 查 看 源 代码 ”， 就 能 看 到 HTML 模板 页 面 的 内 容 。 





4.3.2 MAMP. WAMP 和 和 LAMP 

这 个 方案 要 费 点 时 间 ， 如 果 你 不 喜欢 终端 ， 而 是 希望 通过 拖 放 来 安装 程序 ， 可 以 斌 
一 试 。 

标题 中 的 AMP 代表 Apache (Web 服务 器 软件 )、MySQL (流行 的 数据 库 软件 ) 和 
PHP (流行 的 服务 器 端 脚本 语言 )。 我 们 是 主要 想 用 Apache， 那 才 是 Web 服务 器 软 
件 ， 不 过 另外 两 个 已 经 跟 它 绑 定 了 ， 而 且 相处 融洽 。 





在 Mac 上 ， 可 以 下 载 并 安装 MAMP (http://mamp.info/en/) 或 XAMPP for Mac 


(http://www.apachefriends.org/zh_cn/xampp-macosx.html) 。 


这 两 个 软件 对 应 的 Windows 版 分 别 是 WampServer (http://www.wampserver.com/ 
en/) 和 XAMPP for Windows (http:Wwww.apachefriends.org/zh_cn/xampp-windows. 
html) 。 


如 果 你 使 用 Linux， 那 么 这 些 程序 可 能 都 已 经 安装 好 。 不 过 ， 你 还 是 可 以 再 下 载 
XAMPP for Linux (http://www.apachefriends.org/zh_cn/xampp-linux.html)。 





以 上 这 些 程序 的 安装 过 程 各 有 不 同 ， 建 议 安装 时 注意 看 说 明 。( 我 发 现 最 容易 安装 
的 是 MAMP。) 


安装 时 ， 每 个 程序 都 会 指定 一 个 文件 夹 作为 服务 器 的 目录 ， 以 便 只 公开 该 目录 下 的 
文件 。 安 装 完了 ， 你 需要 找到 这 个 目录 ,把 D3 的 project-folder 文件 夹 复 制 过 去 。 


安装 好 本 地 服务 器 ， 接 下 来 就 可 以 通过 浏览 器 (当然 是 同一 台 机 器 上 的 浏览 器 ) 查 
看 其 目录 下 的 页 面 了 。 在 浏览 器 地 址 栏 输入 : http://localhost/， 后 面 跟 不 跟 端 口号 ， 
要 看 你 的 AMP。 如 果 AMP 配置 成 通过 8888 端口 提供 服务 ， 那 在 地 址 栏 中 应 该 输 
入 : http://localhost:8888/。 





如 果 服 务 器 端口 号 是 8888， 你 的 项 目 文件 夹 是 project-folder， 那 你 的 D3 模板 页 面 
地 址 应 该 是 : http:Wlocalhost:8888/project-folder/。 


4.3.3 ” 快 开始 吧 
准备 就 绕 了 ? 好 ， 下 一 章 就 开始 讲 数据 。 
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数据 是 一 个 非常 宽泛 的 概念 ， 其 宽泛 程度 仅 次 于 无 所 不 包 的 信息 。 什 么 是 数据 ? 
(什么 不 是 数据 ? ) 你 手 里 有 什么 数据 ，D3 需要 什么 数据 ? 


好 吧 ， 宽 泛 地 说 ， 数 据 就 是 结构 化 的 信息 ， 反 映 茶 些 事实 。 


在 可 视 化 编程 的 语 境 下 ， 数 据 保存 在 数字 化 文件 中 ， 一 般 是 文本 格式 或 二 进 制 格式 。 
当然 ， 并 不 是 只 有 文本 内 容 才 算数 据 ， 那 些 表示 图 像 、 音 频 、 视 频 、 数 据 库 、 流 、 
模型 、 文 档 等 一 切 的 比特 和 字 节 也 是 数据 。 


然而 ， 从 D3 和 浏览 器 可 视 化 的 角度 来 说 ， 我 们 只 讨论 文本 数据 。 换 句 话 说 ， 就 是 
那些 可 以 表现 为 数值 或 字符 串 的 东西 。 如 果 你 可 以 把 数据 保存 到 .txt 纯 文本 文件 ， 
或 者 .csy 喜 号 分 隔 值 文件 ， 或 者 .json JSON 文档 中 ， 那 么 D3 就 可 以 使 用 它 。 


不 管 什么 数据 ， 如 果 不 附着 在 什么 东西 上 ， 那 么 就 很 难 使 用 和 可 视 化 。 用 D3 的 术 
语 来 说 ， 数 据 必须 绑 定 到 页 面 中 的 元 素 上 。 所 以 ， 本 章 我 们 先 讨 论 怎么 创建 新 的 页 
面 元 素 ， 然 后 再 介绍 怎么 把 数据 绑 定 到 这 些 元 素 。 


5.1 生成 页 面 元 素 


通常 ， 在 使 用 D3 创建 新 DOM 元 素 时 ， 新 元 素 可 以 是 圆 形 、 和 矩形 ， 或 者 其 他 可 以 
表现 数据 的 图 形 。 但 为 了 大 家 好 理解 ， 我 们 先 从 创建 简单 的 p 元 素 开始 。 


为 此 ， 首 先 要 根据 上 一 章 的 HTML 模板 创建 一 个 新 文档 。 可 以 在 示例 代码 中 找到 
































63 


01_empty_page_template.html， 其 代码 如 下 所 示 。( 眼 光 犀 利 的 读者 会 注意 到 ，src 
属性 中 的 文件 路 径 不 一 样 ， 那 是 为 了 适应 示例 代码 的 目录 结构 。 不 太 明 白 也 没关系 。) 


<1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3 Page Template</title> 
<script type="text/javascript" src="../d3/d3.v3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 


// 你 的 D3 代码 





</script> 
</body> 
</html> 
在 浏览 器 中 打开 这 个 页 面 。 一 定 要 通过 本 地 Web 服务 器 来 访问 这 个 文件 ， 第 4 章 介 


绍 过 。 因 此 ， 浏 览 器 中 的 URL 应 该 大 致 像 下 面 这 样 : 





http://localhost:8888/d3-book/chapter 05/01 empty page template.html 

















如 果 不 是 通过 Web 服务 器 访问 这 个 页 面 ， 那么 URL 的 开头 就 不 是 http://， 而 是 
file://。 再 确认 一 下 ， 保 证 URL 长 得 不 是 这 样 : 


file:///.../d3-book/chapter 05/01 empty page template.html 





好 ， 浏 览 器 加 载 完 页 面 后 ， 打 开 Web 检查 器 。( 关 于 Web 检查 器 ， 可 以 参考 3.4 
节 。) 现在 看 到 的 只 是 一 个 空 页面 ，DOM 内 容 如 图 5-1 所 示 。 











目 © | D3 pageTemplate x\ 





和 © | 口 localhost/d3-book/chapter_05/01_empty_page template.html 3 A 











Ix) | 国 sements| 区 | Resources @ rework | 蝙 sourees (VY Timeline Profiles auaits [a consote 


| pb Computed Style [Showinherited 





v<html lang="en"> Es: 司 
i | Dsles 十 深 准 
<meta charset="utf-8"> | hb Metrics 
<title>D3 Page Template</title> | hb Properties 
<script type="text/javascript" src="../d3/d3.v3.i1s"></script> | w Event Listeners TT 
</head> | 
Y<body> 


<script type="text/javascript"> 
YA Your beautiful D3 code will go here 


</script> 
</body> 
</html> 
瑟 , 和 汽 | QQ ED 党 














回 到 文本 编辑 器 ， 把 script 标签 中 的 注释 禁 换 成 以 下 代码 : 
d3.select ("body") .append("p") .text ("New paragraph!"); 


保存 ， 然 后 刷新 浏览 器 。 哇 喔 ， 原 来 的 空白 页 面 上 多 了 一 行 字 ， 而 Web 检查 器 也 
成 了 图 5-2 所 示 。 


六 











BiIee ) 人 号 D3 Page Template x = 





be © | 口 localhost/d3-book/chapter_05/02_new _element.html a 





New paragraph! 


6 | 国 semens| 区 | Resources @ Newor (05 sources (PY Timeline (proftes 名 Audi [a conso'e 


| bp Computed Style [JShow inherited 
v<html lang="en"> sos m 
ed pStyles 十 深交 
<meta charset="utf-8"> hb Metrics 
<title>D3 Page Template</title> bProperties 
<script type="text/javascript" src="../d3/d3.v3.is"></script> b Event Listeners YT 
</head> | 
了 <body> 
<script type="text/javascript"> 
d3.select("body").append("p").text("New paragraph!"); 
</script> 
<p>New paragraph!</p> 
</body> 
</html> 
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图 5-2: 添加 代码 后 的 Web 检查 器 

看 到 不 同 了 吗 ? 现在 的 DOM 中 多 了 一 个 段落 元 素 ， 这 个 元 素 就 是 代码 动态 生成 
的 ! 只 有 这 一 个 元 素 不 算 什么 ， 呆 会 儿 你 会 看 到 使 用 类 似 的 技术 可 以 动态 生成 儿 十 
上 百 个 元 素 ， 而 每 个 元 素 都 对 应 着 你 数据 集中 的 一 个 值 。 


接 下 来 我 们 解释 一 下 到 底 发 生 了 什么 。( 没 照 着 做 的 读者 可 以 打开 02_new_element. 
html。) 为 了 理解 第 一 行 D3 代码 ， 必 须 先 认识 一 位 新 朋友 : 连 级 语法 。 


5.1.1 连 绎 方法 
D3 聪明 地 利用 了 一 种 叫 连 组 语法 的 技术 ， 用 过 jQuery 的 朋友 都 知道 。 通 过 用 句点 
把 方法 “ 连 级 ”在 一 起 ， 一行 代 码 就 能 执行 多 个 操作 。 对 于 这 种 简单 便捷 的 语法 ， 
最 关键 是 要 理解 其 原理 ， 以 避免 你 将 来 调试 时 的 麻烦 。 

噢 对 了 ， 函 数 和 方法 是 同一 个 概念 的 两 种 说 法 ， 它 们 都 是 能 够 接收 参数 作为 输入 ， 
然后 执行 某 种 操作 ， 最 后 返回 信息 作为 输出 的 一 段 代码 。 


乍 一 看 ， 下 面 这 行 代 码 
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d3.select ("body") .append("p") .text ("New paragraph!"); 


好 像 非常 乱 ， 特 别 是 没有 编程 经 验 的 人 ， 会 有 这 种 感觉 。 所 以 首先 得 知道 JavaScript 
跟 HTML 一 样 ， 都 不 关心 空格 和 换行 。 为 此 ， 可 以 把 每 个 方法 调用 各 放 在 一 行 上 : 








dq3 .select ("body") 
.append ("p") 
.text ("New paragraph!"),; 


我 是 推荐 你 把 每 个 方法 调用 都 分 别 写 在 一 行 上 ， 但 某 些 程序 员 可 能 有 自己 的 编码 习 
惯 。 缩 进 多 少 、 是 否 换行 或 使 用 空格 还 是 制 表 符 ， 全 都 取决 于 你 。 


5.1.2 ”各 个 击破 
好 了 ， 下 面 就 来 逐个 分 析 上 面 那 串 代码 。 





。 d3 
引用 D3 对 象 ， 从 而 能 够 调用 其 方法 。D3 探险 就 此 开始 了 。 


。 .select ("body") 
向 select () 方法 传人 一 个 CSS 选择 符 作 为 输入 ， 它 就 会 返回 一 个 对 DOM 中 匹配 
的 第 一 个 元 素 的 引用 。( 如 果 你 想 取得 多 个 元 素 ， 可 以 使 用 selectAl1l() 方法 。) 
这 里 只 是 取得 文档 的 body 元 素 ， 然 后 把 对 它 的 引用 交 给 调用 链 中 的 下 一 个 方法 。 


。 .append("p") 
append() 会 创建 一 个 你 指定 的 新 DOM 元 素 ， 然 后 将 它 追 加 到 调用 它 的 元 素 
末尾 〈 作 为 最 后 一 个 子 元 素 )。 这 里 创建 了 一 个 P 元素， 因为 调用 该 方法 的 是 
bodqy， 所 以 结果 就 是 在 body 元 素 内 部 追加 一 个 p 元 素 。 最 后 ， appengd () 把 刚 
刚 创建 的 新 元 素 的 引用 交 给 下 一 个 方法 。 


一 





。 .text ("New paragraph!") 
text () 接受 一 个 字符 串 ， 把 它 插入 到 当前 元 素 的 开始 和 结束 标签 之 间 。 因 为 上 
一 个 方法 传递 过 来 一 个 p 元素， 因此 这 里 就 会 把 文本 插入 到 <p> 和 </p> 之 间 。 
(如 果 标 签 间 原来 有 内 容 ， 原 来 的 内 容 会 被 覆盖 。) 


非常 重要 的 分 号 ， 表示 一 行 代码 结束 。 连 缀 完成 。 


5.1.3 平稳 交接 
很 多 D3 方法 都 返回 选中 的 元 素 (实际 上 是 选中 的 元 素 的 引用 ) ， 正 因为 这 样 才能 实 
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现 方法 连 级 。 一 般 来 说 ,方法 返回 的 都 是 正在 操作 的 元 素 的 引用 ,但 有 时 候 也 不 是 。 


所 以 要 记 住 一 点 : 在 连 缀 方法 上 时， 次序 很 重要 。 每 个 方法 的 输出 必须 与 下 一 个 方法 
期 待 的 输入 匹配 。 如 果 相 邻 的 输出 和 输入 不 匹配 ， 那 么 结果 就 像 在 接力 赛跑 中 把 接 
力 棒 扔 到 地 上 一 样 。 


要 知道 哪个 方法 期 待 什么 输入 , 就 要 多 参考 API 文档 (https://github.com/mbostock/d3/ 
wiki/API-Reference) 。 文 档 中 有 对 每 个 方法 的 详细 说 明 ， 包 括 是 否 返 回 选中 的 元 素 。 








5.1.4 不 要 连 组 
不 用 连 缀 语法 也 可 以 实现 同样 的 功能 


Var body = d3.select ("body"); 
Var p = body.append("p"); 
p.text ("New paragraph!"); 


哎哟 1! 太 乱 了 。 不 过 ， 有 时 候 还 不 得 不 断 开 连 缀 ， 因 为 一 口气 串 起 来 很 多 方法 可 能 
并 不 实际 。 或者， 你 只 是 希望 让 代码 更 容易 组 织 ， 更 符合 自己 的 想法 。 


知道 了 怎么 通过 D3 在 页 面 中 创建 新 元 素 ， 下 面 就 该 学 习 为 元 素 附 加 数据 了 。 


5.2 绑 定 数据 
什么 是 绑 定 ， 为 什么 要 绑 定 数据 ? 


数据 可 视 化 说 到 底 就 是 把 数据 映射 到 图 形 ， 数 据 入 而 图 形 出 。 也 许 是 数值 越 大 条 形 
越 长 ， 也 许 特殊 类 别 会 显示 为 更 亮 的 颜色 。 总 之 ， 映 射 规则 你 说 了 算 。 
在 D3 中 ， 为 了 实现 映射 规则 ， 需 要 把 数据 输入 的 值 绑 定 到 DOM 中 的 元 素 上 。 绑 


的 意思 类 似 于 把 数据 “附加 ”或 关联 到 特定 的 元 素 ， 以 便 将 来 引用 数据 的 值 和 应 
用 映射 规则 。 如 果 没 有 绑 定 这 一 步 ， 那 么 DOM 元 素 就 是 一 堆 没 用 的 东西 。 











5.2.1 怎么 绑 定 


要 通过 D3 的 selection.data() 方法 把 数据 绑 定 到 DOM 元 素 。 但 必须 具备 两 个 
条 件 : 


和 数据 ; 
。 选中 的 DOM 元 素 。 


下 面 就 分 别 讨论 一 下 。 
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5.2.2 ”数据 

D3 可 以 很 智能 地 处 理 各 种 数据 ， 能 够 接受 任何 数值 、 字 符 串 或 对 象 (对 象 中 包含 着 
其 他 数组 或 键 / 值 对 ) 的 数组 ， 能 够 流畅 地 处 理 JSON (和 GeoJSON)， 甚 至 还 有 一 
个 内 置 的 方法 用 于 加 载 CSV 文件 。 


简单 起 见 ， 现 在 我 们 只 以 一 个 包含 5 个 数值 的 数组 为 例 : 





var dataset = [ 5, 10, 15, 20, 25 ]:， 


如 果 你 胆子 大 ， 而 且 有 一 些 CSV 或 JSON 数据 ， 也 可 以 直接 按照 下 面 说 的 做 。 否 
则 ， 可 以 看 一 看 5.3 市 。 


1. 加 载 CSV 数 据 
CSV 的 意思 就 是 逗号 分 隔 的 值 (Comma-Separated Value)。CSYV 数据 文件 一 般 是 这 
样 的 : 

Food,Deliciousness 

Apples,9 

Green Beans,5 

Egg Salad Sandwich,4 

Cookies,10 


Vegemite,0.2 
Burrite;7 


这 个 文件 中 每 一 行 都 有 两 个 值 ， 值 与 值 用 喜 号 隔 开 。 第 一 行 一 般 作为 标 头 ， 充 当 每 
一 “ 列 ” 的 列 名 。 


如 果 你 的 数据 保存 在 Excel 文件 里 ， 那 它 多 半 也 是 以 这 种 行 、 列 结构 保存 的 。 要 想 
将 它 转换 成 D3 可 以 使 用 的 格式 ， 先 用 Excel 打开 它 ， 然 后 选择 “另存 为 …… ”， 再 
选择 CSV 文件 类 型 。 


假设 把 前 面 的 CSV 数据 保存 在 food.csv 中 ， 那 么 就 可 以 用 D3 的 aa .csv () 方法 来 
加 载 它 : 


d3.csv("food.csv", function(data) { 
console.log(data); 


ss 
csv () 接受 两 个 参数 : 表示 CSV 文件 路 径 的 字符 串 和 用 作 回 调 函 数 的 匿名 国 数 。 回 
调 函 数 只 有 在 把 CSV 文件 加 载 到 内 存 之 后 才 会 执行 。 因 此 可 以 确定 ， 在 调用 这 个 函 
数 时 ，q3 .csv() 已 经 把 数据 加 载 完 了 。 


回调 国 数 在 执行 时 ， 会 接收 到 加 载 和 解析 后 的 CSV 数据 。 姑 且 把 它 命 名 为 aata 
吧 ， 你 叫 它 什么 都 行 。 剩 下 的 事情 就 都 交 给 回调 函数 办 了 。 在 前 面 的 例子 中 ， 回 调 
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函数 只 是 把 接收 到 的 数组 数据 输出 到 了 控制 台 ， 以 便 验证 ， 如 图 5-3 所 示 。( 参 见 


03_csv_loading_example.html。 ) 





[Object , »Object , »Object , »Object , »Object , » Object ] 





5-3: 输出 到 控制 台 的 数组 数据 


可 以 看 到 数据 保存 在 数组 中 〈 因 为 两 头 儿 各 有 一 个 方 括号 )， 而 且 有 3 个 元 素 ， 每 个 
元 素 都 是 一 个 对 象 。 点 开 每 个 对 象 旁 边 的 小 三 角 ， 可 以 看 到 它们 的 值 ， 如 图 5-4 所 示 。 








[vObject » 了 Object ，T0Object 
Deliciousness: "9" Deliciousness: "5" Deliciousness: "4" 
Food: "Apples" Food: "Green Beans" Food: "Egg Salad Sandwich" 
*__proto__: Object bp__proto__: 0bject bp__proto_: Object 
vObject , vObject ， vObject ] 
Deliciousness: "18" Deliciousness: "8.2" Deliciousness: "7" 
Food: "Cookies" Food: "Vegemite" Food: "Burrito" 
p__proto : Object bp__proto_: Object pb__proto_: Object 








5-4: 扩展 开 的 数组 元 素 


哇 ! 每 个 对 象 都 有 Food 和 Deliciousness 属性 ， 与 CSV 文件 中 的 值 是 一 一 对 应 
的 。( 还 有 第 三 个 属性 ， 叫 ”proto _， 这 个 属性 与 JavaScript 处 理 对 象 有 关 ， 现 
在 不 用 管 它 。) D3 利用 了 CSV 文件 的 第 一 行 作为 属性 名 ， 后 续 行 作为 属性 值 。 这 样 
一 来 就 为 我 们 节省 了 很 多 时 间 。 

另外 ， 还 要 注意 : CSV 中 的 每 个 值 都 是 以 字符 串 形式 保存 的 ， 连 数字 都 是 。( 因 为 
数字 9 两 边 有 双 引 号 ， 即 是 "9"， 而 非 9。) 这 一 点 可 能 会 影响 后 面 的 操作 ， 因 为 你 
会 把 它 当 数值 ， 但 实际 上 它 却 是 一 个 字符 串 。 








处 理 数据 加 载 错 误 
qd3 .csv() 是 一 个 异步 方法 。 什 么 意思 ? 就 是 说 在 它 加 载 数据 的 同时 ， 其 他 
JavaScript 代 码 会 照样 执行 。 (D3 中 其 他 加 载 外 部 资源 的 方法 也 都 一 样 ， 比 如 
d3.json()。 ) 


异步 行为 有 时 候 不 太 好 理解 ， 因 为 我 们 可 能 会 主观 地 认为 CSV 文 件 已 经 加 载 完 
了 ， 但 事实 上 还 没有 。 此 时 常见 的 错误 ， 就 是 在 回调 泡 数 外 面 引 用 外 部 数据 。 记 
住 ， 为 了 免得 日 后 头疼 ， 只 能 在 回调 函数 内 部 (或 回调 函数 调用 的 其 他 函数 中 ) 
引用 数据 。 


我 个 人 喜欢 先 声明 一 个 全 局 变量 ， 然 后 再 调用 da3 .csv() 加 载 数据 。 在 回调 函数 
中 ， 把 数据 复制 给 这 个 全 局 变量 〈 以 方便 后 面 的 函数 使 用 该 数据 ) ， 最 后 再 调用 
依赖 数据 显示 图 形 的 其 他 函数 。 例 如 : 
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var dataset; // 全 局 变量 


d3.csv ("food.csv", function (data) 














dataset = data; // 加 载 完毕 ， 就 将 其 复制 到 qataset. 
generateVis(); // 再 调用 其 他 依赖 数据 
hideLoadingMsg(); ”// 显示 图 形 的 函数 


}); 


还 有 一 点 更 不 好 理解 ， 回 调 函 数 无 论 是 否 成 功 加 载 数据 文件 ， 都 会 执行 。 网 络 连 
接 可 能 断 开 ， 文 件 名 可 能 拼 错 ， 或 者 Web 服 务 器 出 了 什么 毛病 ， 都 可 能 导致 数据 
加 载 失 败 。 但 无 论 如 何 ， 回 调 函 数 都 会 执行 。 如 果 加 载 数据 失败 ， 那 再 调用 依赖 
数据 的 函数 ， 可 能 就 会 在 控制 台中 看 到 错误 ， 图 表 也 不 会 出 现 。 这 种 情况 很 少 发 
生 ， 但 知道 如 何 处 理 很 重要 。 


可 以 在 回调 阵 数 的 定义 中 增加 一 个 可 选 的 errotr 参 数 。 如 果 加 载 文 件 遇 到 问题 ， 
ezzor 中 将 包含 Web 服 务 器 返回 的 错误 消息 ，dqata 就 是 undefined。 如 果 文 件 加 
载 成 功 ， 没 发 生 错误 ， 那 么 error 的 值 就 是 nul1，adata 将 保存 着 相应 的 数据 。 注 
意 ，error 作 为 参数 必须 放 在 第 一 位 ，data 是 第 二 个 : 


Var dataset; 


d3.csv ("food.csv", function (error, data) { 





if (error) { // 如 果 error 不 是 null， 肯 定 出 错 了 











console.1log (error); // 输出 错误 消息 
} else { // 如 果 没 出 错 ， 说 明 加 载 文件 成 功 了 
console.1log (data); // 输出 数据 





// 包含 成 功 加 载 数 据 后 要 执行 的 代码 
dataset = data; 
generateVis(); 
hideLoadingMsg ();，; 


}); 











在 da .csv() 的 回调 函数 中 验证 数据 很 方便 ,但 要 在 数据 加 载 完 毕 后 继续 构建 可 视 
化 图 表 ， 那 最 好 还 是 再 调用 其 他 函数 ， 比 如 : 








var dataset; // 声明 全 局 变量 
d3.csv("food.csv'", function (data) { 


// 把 csv 数据 交 给 全 局 变量 
// 以 方便 将 来 使 用 这 些 数据 


dataset = data; 


// 调用 生成 可 视 化 图 表 的 
// 其 他 函数 ， 比 如 : 


generateVisualization(); 
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makeAwesomeCharts () ; 
makeEvenAwesomerCharts () ; 
thankAwardsCommittee(); 


Fy 
再 提醒 一 下 : 如 果 你 的 数据 是 TSV 文件 ， 可 以 试 试 da .tsv() 方法 。 这 个 方法 的 其 
他 方面 与 d3.csv( ) 都 一 样 。 


2. 加 载 JSON 数 据 
关于 JSON 数据 ， 后 面 我 们 还 会 仔细 讲解 。 现 在 ， 只 要 知道 使 用 d3 .json () 方法 可 
以 像 使 用 aa . csv () 一 样 加 载 JSON 数据 就 行 了 : 











d3.json("waterfallVelocities.json", function(json) { 
console.1log(json); // 输出 到 控制 台 
] ) ; 


这 里 ， 我 把 解析 后 的 输入 命名 为 json， 你 可 以 随便 命名 。 


5.2.3 ”作出 你 的 选择 
数据 讲 完 了 ， 下 面 就 以 这 个 简单 数组 为 例 : 





var dataset = [ 5, 10, 15, 20, 25 ]:; 


接 下 来 需要 决定 选择 什么 。 换 句 话 说 ， 你 想 让 哪个 元 素 与 数据 关联 ?同样 ， 为 简单 
起 见 ， 我 们 假设 每 个 段落 显示 一 个 值 。 那 么 ， 你 可 能 觉得 代码 应 该 这 样 来 写 : 





d3.select ("body") .selectAll ("p") 


你 或 许 没 有 错 ， 但 别 忘 了， 我 们 想 要 选择 的 段落 还 都 不 存在 呢 。 这 就 提出 了 使 用 D3 
时 的 一 个 常见 的 问题 ， 怎 么 选择 还 不 存在 的 元 素 ? 别 急 ， 因 为 答案 可 能 会 让 你 费 点 
脑筋 。 


答案 就 在 enter () 这 个 真正 的 魔术 方法 里 。 先 看 下 面 的 代码 ， 稍 后 解释 : 





d3.select ("body") .selectAll ("p") 
.data (dataset) 
.enter () 
.append ("p") 
.text ("New paragraph!"); 


打开 示例 代码 中 的 04_creating_paragraphs.html1， 可 以 看 到 5 个 新 段落 ， 每 个 段落 中 
的 内 容 都 一 样 ， 如 图 5-5 所 示 。 
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New paragraph! 
New paragraph! 
New paragraph! 
New paragraph! 
New paragraph! 











图 5-5: 动态 生成 的 段落 
下 面 是 详细 的 解释 。 


。 d3.select ("body") 
选择 DOM 中 的 body 元 素 ， 把 它 交 给 连 组 方法 中 的 下 一 个 方法 。 


。 .selectAll("p") 
选择 DOM 中 的 所 有 段落 。 因 为 还 没有 段落 ， 所 以 返回 空 元 素 。 可 以 认为 这 个 空 
元 素 代 表 马 上 就 会 创建 的 段落 。 


。 .datal(dataset) 
解析 并 输出 数据 值 。dataset 数组 中 有 5 个 值 ， 因 而 此 后 的 所 有 方法 都 将 执行 五 
遍 ， 每 次 针对 一 个 值 。 


。 .enter () 
要 创建 新 的 绑 定 数据 的 元 素 ， 必 须 使 用 enter () 。 这 个 方法 会 分 析 当 前 选择 的 
DOM 元 素 和 传 给 它 的 数据 ， 如 果 数 据 值 比 对 应 的 DOM 元 素 多 ， 就 创建 一 个 新 
的 占 位 元 素 。 然 后 把 这 个 新 占 位 元 素 的 引用 交 给 链 中 的 下 一 个 方法 。 





。 .append("p") 
取得 由 enter () 创建 的 空 占 位 元 素 ， 并 把 一 个 p 元 素 追 加 到 相应 的 DOM 中 。 大 
棒 了 ! 然后 它 再 把 自己 刚 创 建 的 元 素 交 给 链 中 的 下 一 个 方法 。 





。 .text ("New paragraph!" 


取得 新 创建 的 p 元 素 ， 插 入 文本 值 。 


5.2.4 绑 定 及 确定 


好 的 ! 现在 已 经 读 取 、 解 析 了 数据 ， 并 将 数据 绑 定 到 了 在 DOM 中 创建 的 p 元 素 。 
不 信 ? 打开 04_creating_paragraphs.html， 然 后 看 看 Web 检查 器 ， 如 图 5-6 所 示 。 
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New paragraph! 
New paragraph! 
New paragraph! 
New paragraph! 
New paragraph! 
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图 5-6: Web 检查 器 显示 了 新 创建 的 元 素 


好 ， 确 实 有 5 个 段落 ， 但 数据 在 哪儿 呢 ? 切换 到 JavaScript 控制 台 ， 输 入 以 下 代码 ， 
按 回 车 。 结 果 如 图 5-7 所 示 。 


console.log(d3.selectAll ("p")) 








且 国 sements 大 ] Resources @ Nework | 电 Sourees (党 mmame [Pomes 网 aa 1ceonson) 
》 console.log(d3.selectAll("p")) 
* [Array[5], select; function, selectAll: function, attr: function, classed: function, style: 
function..} 
¢ undefined 
> 











图 5-7: 控制 台中 的 输出 


有 一 个 数组 ! 确切 地 说 ， 是 包含 另 一 个 数组 的 数组 。 单 击 灰色 三 角 查 看 数组 内 容 ， 
如 图 5-8 所 示 。 


可 以 看 到 5 个 p， 编 号 从 0 到 4。 单 击 第 一 个 〈 编 号 为 0) 旁边 的 三 角 ， 可 以 看 到 如 
图 5-9 所 示 的 结果 。 


看 到 了 吗 ， 你 看 到 了 吗 ? 太 激 动 了 ， 我 都 快 忍 不 住 了 。 在 这 儿 呢 ! 〈 见 图 5-10)。 
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[x eal Elements 央 ] Resources @ Nework 了 属 Sources (党 rmane ee Profiles (A suaits | yconsole| 


》 console,.log(d3.selectAll("p")) 
v [Array[5], select; function, selectAll: function, attr: function, classed: function, style: 
function.] 
v9: Array[5] 
»0:p 





Length: 5 
bb parentNode: #document 
bp__proto_; Array[9] 
lengths: 1 
bp__proto__: Array[0] 
¢ undefined 
> 








图 5-8: 展开 后 的 数组 的 数组 
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》 console. log(d3.selectAll("p")) 
Vv [Array[5]}, select; function, selectAll: function, attr: function, classed; function, style: 
function.} 
v0: Array[5] 
v0: p 
a 
accessKey: "" 





allighs 

wattributes: NamedNodeMap 
baseURI: "http://localhost/d3-book/chapter_985/84_creating_paragraphs.html" 
childElementCount: 0 

bchildNodes: NodeList[1] 

wchildren: HTMLCotLLection[9] 

.classList: DOMTokenList 











图 5-9: 扩展 后 的 p 元 素 

















图 5-10: 最 后 一 步 ， 绑 定 的 数据 


数据 中 的 第 一 个 值 ， 数 字 5， 出 现在 了 第 一 个 段落 的 ”gdata ”属性 中 。 单 击 其 他 
段落 ， 也 可 以 看 到 它们 的 ”gaata _ 属性 分 别 包 含 10、15、20 和 25。 


你 看 ，D3 绑 定 的 数据 没有 出 现在 DOM 中 ， 而 是 作为 该 元 素 的 _ qata _ 属性 保存 
于 内 存 中 。 控 制 台 就 是 确认 数据 绑 定 是 否 正确 的 一 个 工具 。 


数据 准备 好 了 ， 下 面 该 考虑 对 它 做 点 什么 了 。 








5.3 使 用 自己 的 数据 


我 们 看 到 数据 已 经 加 载 到 页 面 中 ， 而 且 也 绑 定 到 了 DOM 中 新 创建 的 元 素 。 但 怎么 
利用 这 些 数 据 呢 ? 以 下 是 目前 为 止 的 代码 : 
var dataBget = [ 5; 10, 15; 20; 25 了 ] 3 
d3.select ("body") .selectAll ("p") 
.data (dataset) 
.enter () 


.append ("p") 
.text ("New paragraph!"); 


把 最 后 一 行 改 一 改 : 
.text (function(d) { return d; }); 


看 看 包含 新 代码 的 05_creating_paragraphs_text.html， 结 果 应 该 如 图 5-11 所 示 。 











图 5-11: 显示 数据 的 段落 


哇 喔 ! 我 们 用 数据 填充 了 每 个 段落 ， 机 关 都 在 aata() 方法 里 。 在 连 级 方法 中 ， 只 
要 调用 aata() 了， 就 可 以 随时 创建 一 个 接收 a 为 输入 的 匿名 函数 。 与 当前 元 素 对 
应 ， 方法 data () 确保 了 每 个 a 都 会 被 赋予 原始 数据 集中 的 一 个 值 。 


随 着 D3 遍历 每 个 元 素 ,“ 当 前 元 素 ” 的 这 个 值 也 会 跟着 变化 。 比 如 ， 循 环 到 第 
三 次 时 ， 代 码 会 创建 第 三 个 pp 元素 ， We 
dataset [2] )。 于 是 ， 第 三 个 段落 的 文本 就 是 “1 














5.3.1 自 定义 函数 
一 般 我 们 在 写 新 国 数 〈 也 叫 方 法 ) 的 时 候 ， 基 本 的 结构 如 下 所 示 : 
function(input value) { 
// 完成 一 些 计算 
return output value; 


} 
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前 面 我 们 使 用 的 函数 极其 简单 ， 没 什么 可 说 的 : 


function(d) { 
return d; 


} 


这 种 国 数 就 叫 匿名 函数 (anonymous function)， 因 为 它 没 有 名 字 。 相 对 而 言 ， 把 函 
数 保存 在 一 个 变量 中 ， 那 个 函数 就 是 命名 函数 (named function) : 


var doSomething = function() { 


// 执行 某 些 操作 的 代码 





使 用 D3 的 过 程 中 会 写 大 量 匿名 函数 。 匿 名 函数 是 访问 个 别 数据 值 并 计算 动态 属性 
的 关键 所 在 。 


我 们 例子 中 的 匿名 函数 写 在 了 D3 的 text () 函数 中 ， 因 此 它 会 先 执行 ， 然 后 把 执 
行 结果 交 给 text () 。 而 text () 完成 最 后 的 工作 (将 接收 到 的 参数 值 作为 文本 插入 
到 选中 的 DOM 元 素 中 ): 


.text (function(d) { 
return dd; 


地 
不 过 ， 我 们 可 以 多 做 一 点 ， 因 为 这 个 函数 是 我 们 自己 可 以 控制 的 ， 可 以 在 里 面 写 任何 代 
码 。 没 错 ， 能 写 自己 的 代码 既是 好 事 ， 也 是 坏事 。 比 如 ， 可 以 像 下 面 这 样 加 上 几 个 字 : 


.text (function(d) { 
return "I can count up to " + d; 


}) ; 





























这 样 就 得 到 了 如 图 5-12 所 示 的 结果 ， 参 见 示例 文件 06_creating_paragraphs_counting.html。 





Ican count upto5 

Ican count upto 10 
Ican count up to 15 
Ican count up to 20 


Ican count up to 25 











图 5-12: 修改 后 的 段落 文本 


5.3.2 ”数据 需要 拥抱 
有 读者 可 能 会 问 : 为 什么 要 写成 function (dj) { ... }, 而 不 是 直接 传人 ad 呢 ? 
比如 ， 这 样 : 
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.text ("I can count up to " + d); 


此 时 此 刻 ， 如 果 不 把 a 封装 在 匿名 函数 里 ，a 就 没有 值 。 可 以 想象 成 这 个 寂寞 的 小 
占 位 符 需 要 一 点 温暖 ， 包 括 来 自 和 东 可 亲 的 函数 圆 括 号 的 拥抱 。( 千 万 不 要 想 大多， 
否则 你 会 觉得 匿名 函数 的 拥抱 简直 要 吓 死 人 人 了， 而 且 还 会 把 问题 复杂 化 。) 


因此 ， 需 要 把 数据 值 轻 轻 地 放 到 一 个 函数 的 怀抱 里 : 





.text (function(d) { // <-- 注意 , 温柔 的 拥抱 在 左边 
return "I can count up to " + qd; 
ys 
实际 原因 是 D3 中 text () 、attz() ， 还 有 很 多 其 他 方法 ， 都 可 以 接收 国 数 作为 参 
数 。 比 如 ，text () 既 可 以 接收 一 个 静态 的 字符 串 作 为 参数 








.text ("someString") 


也 可 以 接收 某 个 函数 的 返回 值 : 





.text (someFunction()) // 一 般 来 说 ，someFunction () 应 该 也 会 返回 字符 串 


或 者 一 个 匿名 函数 写成 这 样 也 可 以 作为 参数 : 





.text (function(d) { 
return d; 


}) 
最 后 传人 的 是 匿名 函数 。 如 果 D3 发 现 它 是 一 个 函数 ， 就 会 调用 它 ， 同 时 将 当前 数 
据 值 a 作为 参数 传 进去 。 这 里 把 参数 命名 为 a 只 是 为 了 方便 ， 你 也 可 以 叫 它 datum 
或 info 或 其 他 任何 名 字 。D3 只 关心 要 有 一 个 参数 ， 有 一 个 参数 才能 把 当前 数据 值 
传 进来 。 本 书 将 全 部 使 用 a， 因 为 它 很 简洁 ， 而 且 与 D3 的 很 多 在 线 示 例 一 致 。 


任何 情况 下 ， 没 有 那个 函数 ，D3 将 无 法 把 当前 数据 值 传 出 来 。 没 有 匿名 函数 及 其 接 
收 数据 值 的 参数 a，D3 会 不 知 所 措 ， 其 至 会 号 吻 大 活 。(D3 比 你 想象 得 更 容易 激动 。) 
一 开始 的 时 候 ， 你 可 能 会 觉得 为 了 拿 到 a 的 值 这 么 做 有 点 笨 ， 因 为 多 费 了 一 些 事 。 
但 随 着 处 理 的 数据 越 来 越 复杂 ， 你 会 慢 慢 发 现 这 种 方法 的 重要 性 。 














5.2.3 添加 样式 
了 解 D3 的 其 他 方法 越 多 ， 就 会 发 现 越 有 意思 。 比 如 ，attr() 和 style() 可 以 分 
别 用 来 设置 取得 的 元 素 的 HTML 属性 和 CSS 属性 。 


比如 ， 在 前 面 代码 中 再 加 一 行 : 
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-Style("color'" "red"); 


就 会 得 到 图 5-13 所 示 的 结果 ， 可 以 参考 示例 文件 07_creating_paragraphs_with_ 





style.html。 





Ican countup to 5 

Ican countup to 10 
Ican count up to 15 
Ican count up to 20 


Ican count up to 25 











图 5-13: 段落 文本 变 成 红色 了 


所 有 文本 都 变 成 了 红色 ， 太 好 了 。 不 过 ， 我 们 可 以 再 写 一 个 自 定义 函数 ， 只 让 那些 
数值 大 于 某 个 浆 值 的 文本 显示 为 红色 。 于 是 ， 可 以 把 代码 中 的 最 后 一 个 字符 串 赫 换 


成 一 个 国 数 ， 改 成 下 面 这 样 : 


.style("color", function(d) { 
if (gd > 15) {  // 阅 值 是 15 
return "red"™; 
} else { 
return "black",; 
} 
es 


打开 示例 文件 08_creating_paragraphs_with_style_functions.html， 就 可 以 看 到 


5-14 所 示 的 结果 。 





Ican countup to 5 

Ican countup to 10 
Ican countup to 15 
Ican count up to 20 


Ican count up to 25 








图 5-14: 动态 为 段落 文本 添加 样式 


好 ， 前 三 行文 本 是 黑色 的 ， 而 数值 超过 
这 一 章 到 现在 ， 我 们 已 经 学 习 了 加 载 数据 、 


我 想 ， 接 下 来 该 学 习 绘制 数据 了 ! 


15 的 后 两 行文 本 都 变 成 了 红色 的 。 





动态 创建 绑 定 到 该 数据 的 DOM 元 素 。 
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基于 数据 给 





这 一 章 学 习 基 于 数据 绘制 图 形 。 
现在 ， 仍 然 以 这 个 最 简单 的 数据 集 为 例 : 





var dataset = [ 5, 10, 15, 20, 25 ]; 


6.1 绘制 DIV 


我 们 要 使 用 这 儿 个 值 来 生成 最 简单 的 条 形 图 。 条 形 图 实际 上 就 是 矩形 ， 而 HTML 的 
div 元 素 是 绘制 矩形 的 最 简单 手段 。( 同样， 对 浏览 回来 说 一 切 都 是 矩形 。 所 以 ， 
你 也 可 以 把 这 个 例子 中 的 aiv 换 成 span 或 其 他 别 的 元 素 试 试看 。) 

严格 来 说 ， 柱 形 图 (column chart) 指 的 是 矩形 沿 垂直 方向 度量 的 图 形 ， 而 沿 水 平方 
向 度量 的 矩形 叫 条 形 图 (bar chart) 。 不 过 ， 大 多 数 人 都 不 区 分 这 两 个 概念 ， 而 统一 
称 其 为 条 形 图 ， 我 们 也 沿用 这 一 惯例 。 如 图 6-1 所 示 ，div 作为 表示 数据 的 条 形 是 


很 合适 的 。 


<div style="display: inline-block; 





























图 6-1: 其 貌 不 扬 的 aiv 


79 


width: 20px; 

height: 75px; 

background-color: teal;"></div> 
对 于 讲 Web 标准 的 人 来 说 ， 这 样 做 可 就 犯 了 大 总 。 一 般 来 说 ， 不 能 为 了 展示 而 使 用 
空 div。 不 过 ， 对 我 们 的 例子 而 言 ， 这 属于 例外 。 
因为 是 一 个 aiv， 所 以 它 的 宽度 和 高 度 都 通过 CSS 样式 设 定 。 对 生成 图 表 而 言 ， 除 


了 高 度 ， 其 他 属性 都 应 该 是 共享 的 。 为 此 ， 我 们 把 公共 的 属性 放 到 一 个 叫 par 的 类 
里 面 ， 放 在 文档 头 部 的 style 标签 中 : 








div.bar { 
display: inline-block; 
width: 20px; 
height: 75px; /* 后 面 会 覆盖 这 个 高 度 */ 
background-color: teal; 


} 


接 下 来 应 该 给 每 个 aiv 都 应 用 bar 类， 以 便 这 些 CSS 规则 产生 作用 。 如 果 通 过 手 
工 来 做 ， 需 要 这 么 写 : 





<div class='"bar'"></div> 


而 使 用 D3， 给 元 素 添加 类 要 使 用 selection.attr() 方法 。 理 解 attr() 和 相似 
的 style () 的 区 别 很 重要 : attr() 设 定 DOM 属性 的 值 ， 而 style () 直接 给 元 素 
添加 CSS 样式 。 








6.1.1 设 定 属性 
attr() 用 于 设 定 HTML 元 素 的 属性 和 值 。 而 HTML 属性 就 是 包含 在 尖 括 号 <> 中 
的 任意 属性 / 值 对 。 比 如 ， 下 面 的 标签 


<p class="caption"> 
<select id="country"> 
<img src="logo.png" width="100px" alt="Logo" /> 


总 共 包 含 5 个 属性 (以 及 对 应 的 值 )， 这 些 属性 和 值 都 可 以 通过 attr () 设 定 : 








属 性 值 

class caption 
id country 
EC logo.png 
width 100px 
alt Logo 





比如 ， 要 给 其 个 元 素 添 加 一 个 bar 类 ， 可 以 这 样 写 代码 : 


-attr("class", "bar™) 


6.1.2 ”关于 类 
元 素 的 类 作为 HTML 属性 存在 于 标记 代码 中 ， 同 时 CSS 样式 规则 也 可 以 引用 它 。 
由 于 为 元 素 设 定 类 (并 据 以 推断 样式 ) 和 直接 给 元 素 应 用 样式 存在 区 别 ， 有 读者 可 
能 不 知道 使 用 哪 种 方式 更 好 。D3 支持 这 两 种 为 元 素 添加 样式 的 方式 。 虽然 用 哪 种 方 
式 取 决 你 自己 ,但 对 于 设 定 多 个 元 素 共 享 的 样式 ， 我 还 是 建议 使 用 设 定 类 的 方式 ， 
而 对 于 一 些 特 殊 的 样式 ， 可 以 直接 应 用 样式 。( 实 际 上 ， 一 会 儿 我 们 就 会 直接 应 用 
样 武 :】 

这 里 还 要 简单 介绍 D3 的 另 一 个 方法 classed() ， 用 于 快速 地 添加 或 删除 元 素 的 类 。 
比如 ， 前 面 那 行 代码 可 以 重 写 成 下 面 这 样 : 











.Classed("bar", true) 


这 行 代码 会 给 选中 的 元 素 添 加 类 bar。 如 果 第 二 个 参数 是 false， 则 会 从 元 素 中 删 
除 类 par: 


.Classed("bar'", false) 


6.1.3” 盲 归 正 传 
把 数据 集 也 考虑 进来 ， 则 到 现在 为 止 完整 的 D3 代码 如 下 : 
Var dataset = [ 5, 10, 15, 20, 25 ]; 


d3.select ("body") .selectAll ("div") 
.data (dataset) 
.enter () 
.append ("div") 
.attr("class™"™, “bar"); 


要 知道 现在 的 效果 ， 可 以 在 浏览 器 中 打开 01_drawing_divs.html， 查 看 一 下 源 代码 ， 
再 看 看 Web 检查 器 。 你 会 看 到 5 个 垂直 的 aiv 条 ， 分别 对 应 数据 集 里 的 5 个 值 。 
可 是 ， 条 与 条 之 间 没 有 距离 ， 看 起 来 就 像 一 个 矩形 ， 如 图 6-2 和 图 6-3 所 示 。 




















图 6-2: 5 个 div 连 成 一 片 
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X 吓 | 回 | < > || ]drawine-divs-lphtmly 同 DoMTree > 回 htmly 回 body， 回 divbar 


v<html lang="en"> 
*<head>-</head> 
T<body> 
p<script type="text/javascript">.</script> 
<div class="bar"></div> 
EE 
<div class="bar"></div> 
<div class="bar"></div> 
<div class="bar"></div> 
</body> 
</html> 











6-3: 从 Web 检查 器 可 以 看 出 来 ， 一 共 5 个 条 


6.1.4 ” 设 定 样式 
前 面 说 过 ，style() 方法 用 于 直接 为 HTML 元 素 应 用 CSS 属性 和 值 。 这 个 方法 执 
行 的 结果 等 价 于 在 HTML 的 style 属性 中 直接 写 入 CSS 规则 : 





<div style="height: 75px;"></div> 


要 生成 条 形 图 ， 每 个 条 的 高 度 必须 是 对 应 数据 值 的 函数 。 下 面 我 们 就 把 这 个 映射 关 
系 添加 到 前 面 的 D3 代码 中 (注意 每 个 方法 连 级 结束 后 都 有 一 个 分 号 ) : 





.style("height", function(d) { 
return d + "px"; 


3s 


在 浏览 器 中 打开 02_drawing_divs_height.html， 可 以 看 到 条 形 都 非常 矮 ， 如 图 6-4 
所 示 。 











ai 











6-4: 条 形 太 短 了 


D3 在 循环 每 个 数据 点 的 同时 ，a 会 得 到 对 应 的 值 。 因 此 ， 可 以 把 a 的 (当前 ) 值 作 
为 条 形 的 高 度 值 ， 后 面 再 加 个 px (指定 单位 为 像素 )。 结 果 5 个 条 形 的 高 度 分 别 是 
Spx、10px、15px、20px 和 25px。 


条 形 图 太 短 了 没意思 ， 还 是 让 它们 都 长 高 点 吧 : 





.style("height", function(d) { 
var barHeight =d* 5; // 放 大 5 倍 
return parHeight + "px"; 


} 


再 给 条 形 之 间 增 加 一 些 距离 ( 写 在 文档 头 部 的 租 入 式 CSS 样式 )， 让 它们 彼此 分 开 
一 点 : 


margin-right: 2px; 


不 错 ! 拿 着 这 张 图 可 以 直接 参加 SIGGRAPH! 大 会 了 ( 见 图 6-5)。 


试 一 试 03_drawing_divs_spaced.html 吧 。 同 样 ， 看 看 源 代 码 ， 再 通过 Web 检查 器 对 
照 一 下 HTML 和 最 终 的 DOM。 

















6-5: 增高 后 的 条 形 图 


6.2 data () 的 魔力 

这 个 条 形 图 还 不 错 ， 但 真正 的 数据 永远 不 会 那么 清 克 : 
var dataset = [ 5, 10, 15, 20, 25 ]; 

下 面 我 们 再 把 示例 数据 和 弄 得 乱 一 些 ， 参 见 04_power_of_data.html: 
var dataset = [ 25, 7, 5, 26, 11 ]; 


数据 的 变化 也 体现 在 了 条 形 图 上 ， 如 图 6-6 所 示 。 当 然 ， 也 不 是 只 能 有 5 个 数据 点 
啊 。 好 吧 ， 再 多 加 一 些 !| (参见 05_power_of_data_more_points.html。) 














var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 
1 ts se Se ee By A :0 
24, 18, 25, 9, 3 ]; 





注 1: SIGGRAPH， 是 美国 计算 机 协会 的 计算 机 图 形 专业 组 (Special Interest Group on Computer Graphics ) 。 
一 一 译 者 注 
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6-6: 接近 真实 的 数据 值 
25 个 数据 点 了 , 不 是 5 个 了 (图 6-7) | 











6-7: 更 多 的 数据 值 
D3 是 怎么 按照 需要 自动 扩展 图 表 的 呢 ? 








d3.select ("body") .selectAll ("div") 
.data (dataset) // <-- 答案 在 这 里 ! 











.entez () 
.append ("div") 
"eater (velasgr, "Dar.) 


.style("height", function(d) { 
Var barHeight = d * 5; 
return parHeight + "px"; 
ys 
传 给 aata() 的 是 10 个 值 ， 它 就 会 循环 10 次 。 传 给 它 100 万 个 值 ， 它 就 会 循环 
100 万 次 (不 过 你 得 有 点 耐心 )。 


这 就 是 data() 的 魔力 ， 它 能 遍历 你 扔 给 它 的 任何 长 度 的 数据 集 ， 然 后 依次 执行 连 
级 在 后 面 的 每 一 个 方法 ， 同 时 更 新 每 个 方法 执行 时 的 上 下 文 ， 以 确保 a 永远 引用 循 
环 中 当前 的 数据 值 。 这 旬 话 可 能 太 长 了 点 ， 如 果 你 没 理解 ， 过 一 会 儿 就 能 理解 了 。 
建议 大 家 复制 05_power_of_data_more_points.html， 随 便 修改 一 下 数据 值 ， 然 后 看 
看 条 形 图 怎么 变化 。 


记 住 ,是 数据 驱动 可 视 化 ， 而 不 是 相反 。 


随机 数据 
有 了 时候 ， 为 了 好 玩 ， 也 可 以 生成 随机 数据 值 来 进行 验证 。 示 例 06_power_of_data 











84 | 第 6 章 


random.html 中 就 是 这 么 做 的 ， 每 次 重新 加 载 页 面 ， 条 形 图 都 会 来 个 大 变脸 ， 如 图 


6-8 所 示 。 








图 6-8: 随机 生成 的 条 形 图 
查看 源 代码 ， 下 面 这 儿 行 是 关键 : 











var dataset = []; // 初始 化 空 数组 

for (var i = 0; i < 25; i++) { // 循环 25 次 
var newNumber = Math.random() * 30; // 生成 介 于 0 到 30 之 间 的 随机 数 
dataset .push (newNumber); // 把 新 数值 添加 到 数组 中 


} 


这 里 没有 使 用 D3 的 任何 方法 ， 只 有 JavaScript。 简 单 解释 一 下 ， 以 上 代码 做 了 以 下 
几 件 事 。 


1. 创建 了 一 个 名 为 dataset 的 空 数组 ; 

2. 初始 化 一 个 for 循环 ， 执 行 25 次 ; 

3. 每 次 生成 一 个 介 于 0 到 30 之 间 的 随机 数 (严格 来 说 ， 最 大 的 数 要 接近 30。 
Math.random() 返回 的 最 小 值 是 0.0， 最 大 值 不 会 达到 1.0。 如 果 返 回 值 是 
0.99999， 那 么 0.99999 乘 以 30 就 是 29.9997， 或 者 比 30 只 小 那么 一 丁丁 点 儿 
的 数 ) ; 
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4. 把 新 数值 追加 到 数组 中 (push() 是 数组 的 方法 ， 每 次 执行 都 会 把 一 个 新 值 推进 
数组 末尾 ) 。 


为 了 更 好 玩 一 点 ， 打 开 JavaScript 控制 台 ， 输 入 console.1og (dataset)， 应 该 可 
以 看 到 随机 生成 的 那 25 个 数值 ， 如 图 6-9 所 示 。 





> console.logldataset) 
[14.793717765714973，21.65710132336244，22.091914135599509，19.6938668503426092， 
B.197558452375233, 8B.327989619547427, 9,349913826671857, 6.715138957389157，, 
28.352523955516517, 28.892786516342312, 18,.432767554186285, 7.862793713994324，, 
11.519823116258336, B,.91862849465999, 5.422192756886588, B.956857887898195, 
13.239774148529335, 24.165618284685443，14.453229457139969,，27.792113937983196， 
2.717762788198279, 12,.752952876935124, 1.7288982389481835,，21.81240729688285， 
26.87524922117591] 


6-9: 控制 台中 显示 的 随机 数值 


注意 ， 这 些 都 是 小 数值 或 浮 点 值 (比如 14.793717765714973)， 没 有 我 们 一 开始 指定 
的 整数 或 整 型 数 (如 14)。 对 我 们 例子 来 说 ， 小 数值 完全 没有 问题 。 但 假如 你 需要 整 
数 ， 可 以 使 用 JavaScript 的 Math.round() 或 Math.floor() 方法 。 前 者 将 数值 向 
上 舍 入 为 最 接近 的 整数 ， 后 者 则 总 是 向 下 舍 入 。 比 如 ， 可 以 把 生成 随机 数 的 代码 : 











Var newNumber = Math.random() * 30; 
放 到 Math.floor() 方法 的 调用 中 : 
Var newNumber = Math.floor (Math.random() * 30) ; 


以 上 代码 可 以 保证 生成 的 新 数值 一 定 是 介 于 0 到 29 (包含 ) 之 间 的 整数 。 为 什么 没 
有 30? 因为 Math.random() 永远 返回 小 于 1.0 的 值 ， 而 Math.floor() 永远 向 下 
舍 人 ， 因 此 29 就 是 可 能 返回 的 最 大 值 。 


在 浏览 器 中 打开 07_power_of_data_rounded.html， 通 过 控制 台 验 证 一 下 所 有 数值 确 
实 都 变 成 了 整数 ， 如 图 6-10 所 示 。 











》 console.log(dataset) 
本 
19, 20, 28, 27] 











6-10: 控制 台中 显示 的 随机 整数 
用 aiv 展示 数据 的 内 容 都 讲 完 了 。 下 一 市 我 们 看 看 SVG 给 我 们 提供 了 哪些 可 能 性 。 


6.3 绘制 SVG 


要 了 解 SVG 的 语法 ， 请 参考 3.8 节 。 
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关于 SVG 元 素 ， 最 关键 是 要 记 住 它们 的 各 个 方面 都 是 通过 属性 来 设 定 的 。 换 句 话 
说 ， 就 是 通过 标签 中 的 属性 / 值 对 来 指定 SVG 元 素 的 各 方面 特征 ， 比 如 : 


<element Property="value"></element> 


咽 ， 跟 HTML 一 样 ! 


<p class="eureka">Eureka!</p> 


前 面 已 经 体验 过 D3 的 append() 和 attr() 方法 了 ， 它 们 分 别 用 于 创建 新 HTML 
元 素 和 设 定 它们 的 属性 。 因 为 SVG 元 素 存在 于 DOM 中 ， 跟 其 他 HTML 元 素 一 样 ， 
因此 生成 SVG 图 形 仍然 要 使 用 append() 和 attr() 方法 。 





6.3.1 创建 SVG 
首先 要 创建 一 个 SVG 元 素 ， 以 便 在 其 中 保存 所 有 





负 
让 


d3.select ("body") .append ("svg"); 


这 行 代码 先 找到 文档 的 body 元 素 ， 然 后 在 结束 的 </body> 标签 前 添加 一 个 新 的 
svg 元 素 。 不 过 ， 我 建议 稍微 改 一 改 这 行 代码 : 





Var svg = d3.select ("body") .append ("svg"),; 


还 记得 D3 的 大 多 数 方法 都 会 返回 它们 所 操作 的 DOM 元 素 的 引用 吗 ? 上 面 这 行 代 
码 就 把 append () 返回 的 新 元 素 保存 在 了 变量 svg 中 。 有 了 这 个 引用 ， 将 来 就 可 以 
少 写 很 多 代码 ， 因 为 不 用 总 是 写 da .select ("svg") ， 而 只 要 写 svg 即 可 : 


svg.attr("width", 500) 
attr("height™", 50); 


当然 ， 也 可 以 把 所 有 代码 都 写 在 一 行 : 


Var svg = d3.select ("body") 
.append ("svg") 
:attr ("widthr, SO0) 
.attr("height", 50); 
请 大 家 参见 08_drawing_svgs.html 中 代码 。 打 开 检 查 器 ， 看 看 DOM 中 是 不 是 已 经 
有 了 新 SVG 元 素 了 ? 没 错 ， 有 一 个 空 的 SVG 元 素 。 


为 了 方便 后 续 的 编码 ， 建 议 把 宽度 和 高 度 值 也 保存 在 变量 中 ， 参 考 09_drawing_ 
svgs_size.html。 在 源 代码 里 可 以 看 到 如 下 代码 : 


// 宽度 和 高 度 
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var w 
var h 


在 后 面 的 所 有 例子 里 ， 我 都 会 这 么 做 的 。 因 为 把 尺寸 值 保存 在 变量 里 ， 将 来 就 可 以 
方便 地 引用 ， 如 下 : 


S00:; 
SO 


Var svg = d3.select ("body") 
.append ("svg") 
.attr ("width", w) // <-- 看 这 里 
.attr("height"，h); // <-- 还 有 这 里 | 


同样 ， 如 果 你 想 把 某 个 字符 串 也 保存 在 变量 里 ， 我 一 点 也 没 意 见 


6.3.2 ”数据 驱动 的 图 形 
现在 该 绘制 一 些 图 形 了 。 还 是 拿 我 们 忠实 的 老 数 据 集 作 例子 吧 : 





var dataset = [ 5, 10, 15, 20, 25 ]; 


后 ， 使 用 aata() 迭代 每 个 数据 点 ， 为 它们 分 别 创建 一 个 


忆 ] 
或 





svg.selectAll ("circle") 
.data (dataset) 
.enter () 
.append ("circle"); 


记 住 ，selectAll( 和 引用 (因为 还 不 存在 呢 )， 而 data() 
把 数据 绑 定 到 即将 创建 的 元 素 ，enter() 返回 对 这 个 新 元 素 的 占 位 引用 ， 最 后 
append() 把 圆 形 添加 到 DOM。 在 这 里 ， as 加 所 有 
圆 形 ， 因 为 一 开始 我 们 选择 的 是 svg (而 不 是 原来 的 body)。 


为 方便 以 后 引用 圆 形 ， 可 以 创建 一 个 新 变量 来 保存 它们 的 引用 : 











Var circles = svg.selectAll ("circle") 
.data (dataset) 
.enter () 
.append ("circle"); 


非常 好 ， 但 这 些 圆 形 还 需要 位 置 和 大 小 信息 ， 如 图 6-11 所 示 。 小 心 点 ， 下 面 这 几 行 
代码 可 能 会 把 你 看 尝 : 





circles.attr("cx", function(d, i) { 
return (i * 50) + 25; 


}) 

.attr("cy", h/2) 

.attr("r", function(d) { 
return d; 

De 

















6-11: 代表 数据 的 圆 形 
还 是 参考 一 下 10_drawing_svgs_circles.html 吧 。 下 面 我 们 一 步 一 步 地 讲解 : 


circles.attr("cx", function(d, i) { 
return (i * 50) + 25; 
}) 
这 是 通过 引用 所 有 圆 形 的 变量 来 设置 每 一 个 圆 形 的 cx 属性 。( 在 SVG 中 ，cx 是 圆 
形 圆心 的 x 坐标， 没 忘 吧 ? ) 因为 数据 已 经 绑 定 到 了 圆 形 ， 所 以 对 每 个 圆 形 来 说 ，a 
分 别 对 应 于 原始 数据 集中 相应 的 值 (5、10、15、20 和 25 ) 。 


另 一 个 值 i 也 是 D3 替 我 们 自动 生成 的 。( 谢 谢 D31 ) 跟 da 一样， 变量 i 也 是 随便 
想 的 一 个 名 字 ， 你 也 可 以 改 ， 比 如 改 成 counter 或 elementID。 我 喜欢 1， 因 为 简 
单 ， 而 且 它 还 跟 for 循环 中 的 计数 器 变量 守 的 命名 一 致 ， 几 乎 所 有 在 线 示例 中 都 使 
用 i 作 计 数 器 。 


好 啦 ，i 就 是 当前 元 素 的 索引 值 。 这 个 值 从 0 开始 ， 因 此 第 一 个 圆 形 的 == 0, 第 
二 个 圆 形 的 i == 1， 依 此 类 推 。 这 里 我 们 利用 了 这 个 顺序 值 ， 把 每 个 圆 形 都 向 右 
推进 一 段 ， 因 为 每 次 循环 i 的 值 都 会 加 1: 















































(0 * 50) + 25  // 返 回 25 
(1 * 50) + 25 // 返回 75 
(2 * 50) + 25 // 返 回 125 
(3 * 50) + 25 // 返回 175 
(4 * 50) + 25 // 返回 225 





为 了 在 自 定义 函数 里 使 用 这 个 索引 ， 必 须 记 住 把 它 作 为 函数 的 参数 ， 比 如 
function(d，i)。 当 然 ， 同 时 也 要 传 入 qd， 即使 你 在 当前 函数 里 不 用 它 也 要 传 
(就 像 前 面 例子 中 一 样 )。 同 样 ， 这 个 参数 的 名 字 并 不 重要 ,但 函数 参数 的 个 数 (一 
个 或 两 个 ) 不 能 少 。 


什么 ， 昕 到 参数 你 就 尖 大 ?不要紧 的 。 实 际 上 ， 你 基本 上 只 要 记 住 9 和 i 就 足够 
了 。 后 面 我 们 也 不 会 再 学 习 其 他 匿名 函数 的 参数 了 。 好 ， 下 一 行 : 











-attr("ey"y /2) 


cy 是 每 个 圆 形 圆 心 的 y 轴 坐 标 。 这 里 是 把 cy 设置 成 了 nh 的 一 半 。 还 记得 吧 ,，n 保 
存 着 整个 SVG 元素 的 高 度 ， 因 此 h/2 等 于 把 所 有 圆 形 垂直 居中 。 
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attre (em, function(d) { 
return d; 


Pe 
最 后 ， 每 个 圆 形 的 半径 + 被 设置 为 等 于 gd， 反映 数据 值 的 大 小 。 


6.3.3 你 好 ， 色 彩 
色彩 填充 (fill) 和 描 边 (stroke) 同样 也 是 属性 ， 也 可 以 通过 attr() 方法 来 设 
定 。 比 如 ， 再 连 组 如 下 代码 : 


.attr ("fill", "yellow") 

.attr("stroke", "orange") 

.attr("stroke-width", function(d) { 
return d/2; 


}); 
就 可 以 得 到 图 6-12 所 示 的 彩色 圆 形 了 ， 参 考 一 下 11_drawing_svgs_color.html 吧 。 


. 。 ©©O©® 
图 6-12 彩色 的 数据 辆 形 


当然 ， 通 过 混合 各 种 属性 和 自 定义 函数 可 以 得 到 各 种 效果 。 不 过 ， 数 据 可 视 化 的 关 
键 在 于 选择 适当 的 映射 规则 ， 从 而 保证 反映 数据 的 视觉 元 素 能 够 让 用 户 容易 看 懂 ， 
对 用 户 有 价值 。 


6.4 绘制 条 形 图 


接 下 来 ， 我 们 要 把 前 面 所 学 的 东西 整合 起 来 ， 用 SVG 来 创建 简单 的 条 形 图 。 


为 此 ， 就 从 修改 div 条 形 图 的 代码 开始 ， 用 SVG 代替 之 。SVG 为 视觉 表现 提供 了 
更 多 的 灵活 性 。 之 后 ， 我 们 还 要 学 习 给 图 形 添加 标签 ， 以 便 看 到 确切 的 数据 值 。 























6.4.1 老 方 法 生成 的 条 形 图 
现在 看 看 12_making_a_bar_chart_divs.html， 其 中 有 用 老 方法 aiv 生成 条 形 图 的 代码 : 





var dataset = | 车， 于 0 于 3 19; Zl, 25; 22, Te 15, 13 
Ll Po LS .D0 “18 LT. L606%.. L823.25. | 


d3.select ("body") .selectAll ("div") 
.data (dataset) 
.enter () 
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.append ("div") 

.attr("class", "bar") 
.style("height", function(d) { 
Var barHeight = d * 5; 

return barHeight + "px"; 


}); 
图 6-13 展示 了 在 浏览 器 中 看 到 的 效果 。 或 许 你 很 难 想象 ， 我 们 完全 可 以 大 幅 改 进 


个 条 形 图 。 








6-13: 基于 div 的 条 形 图 











6.4.2 ”用 新 方法 改进 条 形 图 
首先 ， 需 要 确定 新 SVG 元 素 的 大 小 


// 宽度 和 高 度 

Var Ww = S500:; 

var hn = 100; 
当然 ， 你 可 以 把 w 和 +h 改 成 其 他 名 字 ， 比 如 svgwiath 和 svgHeight。 你 觉得 怎么 
明确 ， 就 怎么 命名 。JavaScript 程序 员 非 常 注 重 效 率 ， 因 此 你 会 经 常 看 到 一 些 单个 
字母 的 变量 ， 代 码 间 也 没有 空格 ， 很 难看 懂 却 能 很 快 写 出 来 。 


然后 ， 告 诉 D3 创建 空 SVG 元 素 ， 并 将 其 添加 到 DOM 中 : 


// 创建 sv 元 素 
Var svg = d3.select ("body") 
.append ("svg") 
.attr("width", w) 
.attr("height", h); 
就 算是 喝 嗪 一 点 吧 ， 这 些 代 码 会 在 结束 的 <-/pbody> 的 标签 前 面 插入 新 的 svg 元 
素 ， 将 其 宽度 和 高 度 设置 为 500 像素 和 100 像素 。 同 时 ， 代 码 还 把 返回 的 结果 保 
存在 了 变量 svg 中 ， 因 此 后 面 可 以 方便 地 引用 这 个 SVG 元 素 ， 而 不 必 每 次 再 使 用 


dq3 .select ("svg") ) 之 类 的 代码 重新 选择 。 
接 下 来 ， 不 创建 aiv， 而 生成 矩形 元 素 rect 并 将 它们 添加 到 svg 中 : 
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svg.selectAll ("rect") 
.data (dataset) 
.enter () 
.append ("rect") 
.attr ("x", 0) 
:E(u 0) 
:atte ( width 20) 
attr ("height", .100):; 


这 行 代码 选择 了 svg 中 的 所 有 矩形。 当然， 这 时 候 什 么 都 还 没有 呢 ， 所 以 会 返回 一 
个 空 的 元 素 集 。( 很 奇怪 呀 ， 没 错 ， 不 过 相信 我 。 在 D3 中 ， 永 远 得 先 选择 你 想 要 操 
作 的 元 素 ， 即 使 这 个 元 素 或 元 素 集 暂时 还 没有 。) 

接 下 来 data (dataset) 看 到 了 数据 集中 有 20 个 值 ， 就 把 这 些 值 交 给 了 enter () 


处 理 。 然 后 ，enter () 会 为 每 个 数据 值 返回 一 个 占 位 元 素 ， 让 它们 都 有 对 应 的 尚未 
创建 的 rect。 





根据 这 20 个 占 位 元 素 ，append ("rect") 会 分 别 把 它们 插入 DOM 中 。 第 3 章 也 介 
绍 过 ， 每 个 rect 必须 有 x、y、width 和 height 属性 。 这 里 就 是 用 attr() 为 每 
个 新 创建 的 rect 设置 了 这 些 属性 。 


漂亮 四 ,不 ?好 吧 ， 或许 不 漂亮 。 所 有 条 形 都 已 经 生成 了 (在 Web 检查 器 中 看 看 
13_making_a_bar_chart_rects.html 的 DOM 中 有 什么 ) ， 但 它们 的 坐标 和 大 小 全 都 一 
样 ， 所 以 就 重 县 在 了 一 起 ， 如 图 6-14 所 示 。 当 然 ， 这 时 候 的 条 形 并 没有 反映 数据 。 





























6-14: 孤零零 的 一 个 条 形 


首先 来 解决 重 琶 的 问题 。 为 此 ， 要 把 x 值 从 0 改 为 一 个 与 i (也 就 是 每 个 值 在 数据 
集中 的 位 置 序号 ) 对 应 的 动态 生成 的 值 。 让 第 一 个 条 形 的 x 轴 坐标 是 0， 随 后 的 分 
别 是 21、42， 依 此 类 推 。( 第 7 章 将 介绍 D3 的 比例 尺 ， 那 是 一 个 解决 这 个 问题 的 更 
灵活 的 机 制 。) 








.attr("x", function(d, i) { 
return i * 21; // 条 形 宽 20 像素 ， 外 加 1 像素 间距 
}) 





完整 的 代码 请 参考 14_making_a_bar_chart_offset.html， 结 果 如 图 6-15 所 示 。 














起 作用 啦 ， 但 这 样 做 不 是 很 灵活 。 如 果 数 据 集 再 大 一 些 ， 那 么 条 形 会 更 多 ， 而 最 右 
边 的 条 形 很 可 能 跑 到 SVG 外 头 去 ! 算 一 算 吧 ， 每 个 条 形 宽 20 像素 ， 外 加 1 像素 间 
距 ， 那 么 500 像素 宽 的 SVG 只 能 容纳 23 个 条 形 。 图 6-16 演示 了 第 24 个 条 形 跑 到 
SVG 外 面 去 的 情 状 。 











6-15: 20 个 条 形 



























































6-16: 24 个 条 形 














更 好 的 做 法 是 使 用 灵活 、 动 态 的 坐标 ， 让 所 有 可 见 图 形 的 高 度 、 宽 度 、x 坐标 、y 坐 
标 ， 全 部 能 根据 数据 成 比例 地 缩放 。 

跟 任何 编程 任务 一 样 ， 实 现 动态 缩放 的 办 法 有 无 数 种 。 但 我 们 上 只 能 选择 一 种 。 首 先 ， 
从 改进 设置 每 个 条 形 x 坐标 的 那 行 代码 开始 修改 ; 

















attr ("x", function(d, 1) { 
return i * (w / dataset.length); 


}) 


好 啦 ， 现 在 所 有 条 形 的 x 坐标 值 都 直接 与 SVG 的 宽度 (w) ， 以 及 数据 集中 数据 值 的 
个 数 (aataset .length) 紧 紧 关联 在 一 起 了 。 这 样 一 来 ， 所 有 条 形 就 会 在 SVG 中 
均匀 分 布 ， 无 论 数据 集中 是 有 20 个 值 (如 图 6-17 所 示 ) 


6-17: 20 个 平均 分 布 的 条 形 


» 




















上 一 























是 只 有 5 个 值 ， 如 图 6-18 所 示 。 








el 











基于 数据 给 


加 


93 














图 6-18: 5 个 平均 分 布 的 条 形 
15_making_a_bar_chart_even.html 中 包含 到 目前 为 止 所 有 的 代码 。 


现在 ， 该 设置 条 形 的 宽度 ， 让 宽度 也 成 比例 缩放 。 如 果 数 据 多 ， 条 形 就 窗 一 些 ， 如 
果 数 据 少 ， 条 形 就 宽 一 些 。 为 此 ， 要 在 声明 SVG 宽度 和 高 度 的 地 方 再 声明 一 个 新 


变量 




















He 





EE : 


// 宽度 和 高 度 

var W s S00 

var hs. 100% 

var barpadding = 1; // <-- 新 变量 | 


然后 在 设置 每 个 条 形 宽度 的 那 一 行 代码 里 引用 这 个 变量 。 换 句 话 说 ， 每 个 条 形 宽度 
不 再 是 固定 的 20 像素 ， 而 是 要 设置 成 SVG 宽度 与 数据 值 个 数 的 商 再 减 掉 间 距 值 : 














.attr("width", w / dataset.length - barPadding) 





起 作用 啦 ! (参见 图 6-19 和 16_making_a_bar_chart_widths.html, ) 


图 6-19: 20 个 平均 分 布 的 条 形 ， 而 且 宽 度 可 以 动态 调整 


条 形 的 宽度 和 x 轴 坐 标 都 能 正确 调整 ， 无 论 是 像 上 面 那样 有 20 个 数据 值 ， 还 是 有 5 
个 数据 值 (参见 图 6-20) ， 甚 至 有 100 个 数据 值 (参见 图 6-21)。 


图 6-20: 5 个 平均 分 布 的 条 形 ， 而 且 宽 度 可 以 动态 调 







































































6-21: 100 个 动态 宽度 和 间距 的 条 形 


最 后 ， 还 要 通过 代码 让 数据 值 来 决定 条 形 高 度 。 陪 明 的 读者 可 能 会 想 ， 只 要 在 设置 
条 形 高 度 时 使 用 a 的 值 就 好 了 : 














.attr("height", function(d) { 
return 4d; 


站 站 
哎哟 ， 图 6-22 中 的 条 形 图 看 起 来 有 点 其 貌 不 扬 啊 。 要 不 把 数值 放大 几 倍 ? 





.attr("height", function(d) { 
return d * 4; // <-- 放大 4 倍 ! 


和 














6-22: 动态 高 度 


唉 ， 看 来 没 那 么 简单 ! 我 们 想 要 的 不 是 像 图 6-23 所 示 的 上 端 对 齐 ， 而 是 要 下 端 对 
齐 一 一 不 过 别 埋 她 D3， 这 是 SVG 的 问题 。 


6-23: 放大 高 度 


或 许 读 者 还 记得 ， 在 绘制 SVG 矩形 时 ，x 和 y 值 指定 的 是 它们 左上 角 的 坐标 。 换 
句 话 说， 每 个 条 形 的 原点 或 者 参照 点 都 是 它 的 左上 角 。 所 以 呢 ， 如 果 能 把 坐标 指定 
为 每 个 条 形 图 的 左下 角 就 简单 多 了 。 可 是 ，SVG 只 支持 左上 角 坐 标 系 ， 而 且 坦 白 来 
讲 ，SVG 在 这 个 问题 上 跟 我 们 的 想法 不 一 样 。 
























































既然 条 形 只 能 “从 上 向 下 长 "， 那 么 相对 于 SVG 的 上 沿 ， 每 个 条 形 的 “上 沿 ” 在 哪 
里 呢 ? 好 ， 每 个 条 形 的 上 沿 可 以 用 SVG 高 度 与 对 应 的 数据 值 之 间 的 关系 来 表示 ， 就 
像 这 样 : 
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了 站 (7 function(d) { 
return h - d; // 高度 减 数据 值 
}) 
然后 ， 为 了 让 每 个 条 形 的 “下 沿 ” 与 SVG 的 下 沿 对 齐 (参见 图 6-24) ， 每 个 rect 
的 height 可 以 就 设置 为 数据 值 本 身 : 





.attr("height", function(d) { 
return qd; // 原 数据 值 
7 














图 6-24: 条 形变 成 从 下 向 上 “长 ”了 


现在 可 以 把 a 改 成 a * 4， 把 条 形 放 大 一 些 ， 结 果 就 变 成 了 如 图 6-25 所 示 。( 使 用 
D3 的 比例 尺 机 制 ， 可 以 更 适当 地 排 布 条 形 ， 不 过 现在 还 没 到 介绍 它 的 时 候 。) 























图 6-25: 条 形变 长 了 


这 个 自 下 而 上 的 SVG 条 形 图 的 代码 位 于 17_making_a_bar_chart_heights.html 中 。 








6.4.3 上 色 
添加 颜色 很 容易 ， 只 要 用 attr() 方法 设置 fill 属性 就 行 了 : 


本 





结果 如 图 6-26 所 示 ， 所 有 条 形 都 是 青色 (teal)， 代 码 在 18_making_a_bar_chart 











teal.html 中 。 

















图 6-26: 青色 的 条 形 图 
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青色 虽然 不 难看 ， 但 最 好 能 让 颜色 反映 数据 的 其 些 特 性 。 换 名 话说 ， 最 好 可 以 根据 
数据 值 来 编码 颜色 值 。( 对 于 这 个 条 形 图 而 言 ， 这 样 做 叫做 双重 编码 ， 即 同样 的 数据 
值 被 编码 成 两 种 可 见 的 特性 ， 条 形 高 度 和 颜色 。) 


通过 数据 生成 颜色 也 很 简单 ， 同 样 只 要 写 一 个 接收 a 作为 参数 的 自 定义 函数 即 可 。 
这 里 ， 我 们 把 "teal" 替换 成 一 个 自 定义 函数 ， 结 果 就 是 6-27 所 示 的 条 形 图 : 
attr("filli", function(d) { 


return "rgb(0, 0, " + (d * 10) + ")"; 


] ) ; 





6-27: 数据 驱动 的 蓝 色 条 形 图 
相关 代码 可 以 参见 19_making_a_bar_chart_blues.html。 这 种 视觉 编码 好 像 用 处 不 

















大 ， 但 从 这 个 例子 能 知道 怎么 把 数据 转换 成 颜色 。 这 里 是 把 a 乘 以 10， 然 后 将 结果 
作为 rgb () 函数 的 最 后 一 个 参数 ( 蓝 色 分 量 )。 因 此 ， 值 越 大 (条 形 越 长 ) ， 蓝 色 分 
量 越 多 ， 值 越 小 〈 条 形 越 短 ) ， 蓝 色 分 量 越 少 (接近 黑色 )。 此 时 的 红 、 绿 分 量 的 值 
都 是 0。 





多 值 映 射 
注意 一 下 ， 你 会 发 现在 方法 链 上 已 经 调用 了 5 次 attr() ， 分 别 设 定 了 条 形 的 x、 
y、width、height 和 fil1 值 。 
如 果 你 觉得 这 样 一 遍 一 遍地 输入 attr() 人 很 麻烦 ， 那 肯定 会 喜欢 D3 的 多 值 映射 机 
制 。 这 个 机 制 让 你 一 次 性 设置 多 个 值 ， 而 且 仍 然 是 使 用 attr() 方 法 。 假设 要 把 一 
个 圆 形 平移 到 SVG 左 上 角 ， 再 设置 成 红色 ,可 以 每 次 单独 调用 attr (): 
svg.select ("circle") 

attr("cx", 0) 

teEr( Me;. 0) 

at (ll VECed")s 
或 者 ， 也 可 以 把 这 三 个 属性 和 它们 的 值 都 封装 在 一 个 对 象 中 ， 然 后 统一 交 给 
attr(): 


svg.select ("circle") 
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attr(t 
Ger 
CY 9, 
fills. WEEdY 


a 


后 一 种 写法 更 加 简洁 ， 如 果 你 用 过 jQuery， 可 能 早 就 熟悉 这 种 把 铬 性/ 值 对 打包 为 
对 象 的 语法 了 。 每 个 属性 / 值 对 中 的 值 也 可 以 是 匿名 函数 ， 而 且 可 以 像 往常 一 样 通 
过 引用 和 iji 动 态 生 成 值 。 利 用 这 种 多 值 映 射 机 制 ， 可 以 把 我 们 前 面条 形 图 的 代码 
重 写 如 下 : 


svg.selectAll ("rect") 
.data (dataset) 


.enter () 

.append ("rect") 

.attr({ 
x: function(d, i) { return i * (w / dataset.length); }, 
y: function(d) { return hn - (ax 4); }, 


width: w / dataset.length - barPadding， 
height: function(d) { return qd * 4; }, 
fill: function(d) { return "rgb(0, 0, "+ (d * 10) + ")";} 


Ds 
如 果 你 喜欢 这 种 写法 ,那么 听 说 style () 和 其 他 一 些 方 法 也 支持 多 值 映射 ， 你 
一 会 更 开心 。 不 过 本 书 还 是 会 使 用 比较 宛 长 的 写法 ， 只 要 你 知道 还 有 其 他 选择 
就 好 。 











6.4.4 ”加 标签 

条 形 图 很 好 ， 但 如 果 再 配 上 实际 的 数据 值 ， 那 就 更 好 了 。 这 时 候 就 得 用 到 本 节 要 介 
绍 的 标签 了 ， 而 且 通 过 D3 生成 标签 是 非常 非常 容易 的 。 或 许 你 还 有 印象 ， 在 SVG 
中 是 可 以 添加 文本 元 素 的 。 好 ， 现 在 开始 吧 : 




















svg.selectAll ("text") 
.data (dataset) 
.enter () 
.append ("text") 


看 着 眼熟 ? 对 ， 怎 么 添加 矩形 ， 就 怎么 添加 文本 。 首 先 ， 选 择 想 要 的 元 素 ， 然 后 绑 
定数 据 ， 加 入 元 素 (此 时 的 元 素 只 是 占 位 符 )， 最 后 把 新 文本 元 素 添加 到 DOM 中 。 


接 下 来 使 用 text () 方法 让 每 个 文本 元 素 都 包含 一 个 数据 值 : 


.text (function(d) { 
return d; 





再 进一步 扩展 ， 通 过 设置 x 和 y 值 来 定位 文本 元 素 。 偷 个 懒 ， 把 前 面 用 于 条 形 的 代 
码 复制 过 来 也 可 以 : 


attr("x", function(d, i) { 

return i * (w / dataset.length); 
}) 
.attr("y", function(d) { 

return h - (d * 4); 


和 
好 啦 1 数据 值 标签 来 了 。 但 有 些 数字 显示 不 完整 ， 参 见 图 6-28。 








图 6-28: 值 标签 新 鲜 出 炉 
对 ， 需 要 把 值 标 签 向 下 移动 一 小 段 距 离 ， 需 要 进行 一 点 坐标 计算 : 











attr("x", funcetion(d, 3¥) 4 
return i * (w / dataset.length) + 5; // +5 
})) 


.attr("y", function(d) { 
returnh- (d* 4) + 15; // +15 


]) ; 
得 到 的 图 6-29 所 示 的 结果 好 多 了 ， 但 看 不 清楚 了 。 





6-29: 条 形 内 的 值 标签 














高 二 oa Y 
好 在 这 个 问题 容易 解决 : 
iattr("font=family", "sans=serif") 
“atte(font=8L2e",. "LIOR") 
at (i, Vwhiten).; 


代码 真神 奇 啊 ! 图 6-30 中 的 图 形 可 以 在 20_making_a_bar_chart_labels.html 中 看 到 。 
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图 6-30: 漂亮 的 值 标签 


假如 你 疫 有 排版 强迫 症 ， 现 在 就 可 以 收 手 了 。 不 过 ， 假 如 你 跟 我 一 样 吹 毛 求 症 ， 会 
发 现 值 标签 与 各 自 的 条 形 没有 完美 对 齐 。( 比 如 ， 第 一 个 条 形 中 的 5。) 改 这 个 太 容 
易 啦 ， 可 以 使 用 SVG 的 text-anchor 属性 来 水 平 居中 文本 ， 就 像 指定 x 值 一 样 : 


.attr("text-anchor", "middle") 
然后 ， 再 改 一 下 计算 x 值 的 方法 ， 让 它 等 于 每 形 的 左边 位 置 值 加 上 条 形 宽度 的 
一 半 : 


satte (x, function(d; E) { 
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; 











}) 


另外 ， 为 了 让 间距 也 合适 ， 我 还 要 把 标签 向 上 提 一 个 像素 ， 结 果 如 图 6-31 所 示 ， 完 
整 的 代码 请 参考 21_making_a_bar_chart_aligned.html: 





.attr("y", function(d) { 
returnh- (d* 4) + 14; //15 变 成 了 14 


}) 





25 25 
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15 15 wa 
13 12 
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图 6-31: 居中 值 标签 














6.5 绘制 散 点 图 


今 为 止 ， 我 们 只 学 习 了 绘制 条 形 图 ， 而 且 使 用 的 是 简单 的 一 维 数据 值 。 如 果 是 两 
。 需要 互相 对 照 着 绘制 ， 那 就 需要 用 到 第 二 维 。 散 点 图 是 在 两 个 坐标 轴 上 表 
现 两 组 对 应 值 的 常见 图 表 。 


6.5.1 数据 
第 3 章 曾 介绍 过 ， 组 织 数 据 的 方式 有 很 多 种 ， 非 常 灵活 。 对 于 散 点 图 ， 我 们 可 以 使 
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用 数组 的 数组 。 主 数组 包含 每 个 数据 “点 ”的 元 素 ， 而 每 个 “点 ”元 素 同 样 也 是 数 
组 ， 但 只 包含 两 个 值 : x 坐标 和 y 坐标 。 





var dataset = [ 
[TS 2017 [S80 50], TI250, SO， [LD0,. 33 [330, 35]， 
[410, 12], [4&75, 44],. [25, 57], [85, 21], [220, 88] 
i 
别 忘 了 ，[] 表示 数组 ， 因 此 骨 套 的 方 括号 [[] ] 表示 数组 中 的 数组 。 数 组 的 元 素 以 
逗号 分 隔 ， 因 此 包含 三 个 数组 的 数组 ， 形 式 上 应 该 是 这 样 的 : [[],[],[]]。 


如 果 给 上 面 的 数据 集 多 加 点 空白 ， 看 起 来 会 更 清楚 : 


Var dataset = [ 
5. 20 
480， 号 届 
之 397， 50 
100， 3 
330, 95 
410， 了 
475, 44 
25. 67 
85, 这 二 
之 这 人 0 88 








1 


这 样 就 很 明白 了 ， 每 行 数据 都 对 应 图 形 中 的 一 个 点 。 比 如 ，[5， 20]， 其 中 5 是 x 
轴 坐 标 ，20 是 y 轴 坐 标 。 








6.5.2” 散 点 图 
事实 上 ， 可 以 借鉴 绘制 条 形 图 时 所 用 的 大 部 分 代码 ， 包 括 创建 SVG 元 素 的 部 分 : 


// 创建 svG 元 素 

Var svg = d3.select ("body") 
.append ("svg") 
.attr ("width", w) 
.attr("height", h); 


但 这 里 不 是 要 创建 rect 元 素 ， 而 是 要 为 每 个 数据 点 创建 circle: 








svg.selectAll ("circle") // <-- 不 是 "rect" 了 
.data (dataset) 
.enter () 
.append ("circle") // <-- 不 是 "rect" 了 





当然 ， 也 不 用 再 设 定 矩形 的 x 和 yy 以 及 width 和 height 属性 ， 而 是 要 设 定 圆 形 的 
cx、cy 和 上 属性 : 
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-attr ("er funetion(a) { 
return dl[0]; 

}) 

.attr("cy", function(d) { 
return dl[1]; 

}) 


attr{("r", 5S); 





图 6-32 中 的 散 点 图 是 由 22_scatterplot.html 生成 的 。 

















图 6-32: 简单 的 散 点 图 


注意 这 一 次 设 定 cx 和 cy 属性 时 访问 数据 值 的 方式 。 此 时 ，function(d) 中 的 a 
将 保存 着 D3 传 过 来 的 当前 数据 值 ， 而 且 是 大 数组 中 的 小 数组 。 


hee ed et et ee a 
访问 它们 的 值 。 也 就 是 说 ， 不 能 再 用 return qd， 而 要 用 return qd[0] 和 和 return 
qd[1] ， 它 们 分 别 返回 小 数组 中 的 第 一 个 和 第 二 个 元 素 。 


比如 ， 对 于 第 一 个 数据 点 [5， 20] ， 第 一 个 值 (位 置 为 0 的 值 ) 是 5， 第 二 个 值 
(位 置 为 1 的 值 ) 是 20: 

















回 5 
回 20。 





// 返 
// 返 


同样 地 ， 如 果 要 访问 大 数组 中 的 值 (比如 在 D3 代码 外 部 )， 也 要 使 用 方 括号 ， 比 
如 : 





dataset [5] // 返回 [410，12] 


其 至 可 以 使 用 多 个 方 括号 访问 租 套 数组 的 值 : 





dataset [5] [3] // 返回 12 





不 信 ? 那 就 试 一 试 22_scatterplot.html， 打 开 JavaScript 控 制 台 ， 在 其 中 输入 
dataset [5] 和 dataset [5] [5] ， 看 看 返回 值 是 什么 。 


6.5.3 ee 
， 你 一 定 会 想到 让 圆 形 的 大 小 有 所 不 同 ， 让 圆 形 的 面积 对 应 各 自 表现 的 值 。 一 





般 来 说 ， 在 通过 圆 形 表现 数量 时 ， 通 用 的 做 法 都 是 将 数据 点 编码 为 面积 ， 而 不 是 半 
径 。 赁 直觉 想象 一 下 ， 这 就 像 用 所 有 “墨水 ”或 像素 来 反映 数据 值 。 将 数据 值 映 射 
为 圆 形 半 径 是 一 个 常见 的 错误 。( 我 自己 就 犯 过 好 多 次 这 种 错误 。) 映射 到 半径 更 简 
单 ， 数 学 计算 最 少 ， 但 结果 却 会 导致 数据 表现 不 准确 。 


可 在 创建 SVG 圆 形 时 无 法 指定 面积 值 。 那 就 只 能 自己 根据 数据 值 先 计算 出 对 应 的 半 
径 ， 然 后 再 设置 + 属性 。 





知道 了 面积 ， 怎 么 求 半径 ? 还 记得 圆 形 的 面积 公式 吧 ， 圆 形 面 积 等 于 r 乘 以 半径 的 
平方 ， 或 者 A = nr 


假设 现在 圆 形 的 面积 是 a[1] ， 而 为 了 让 上 方 的 圆 形 更 大 一 些 ， 得 用 h 减 去 它 。 因 而 
现在 的 面积 是 ha - d[1]。( 第 7 章 将 介绍 怎么 运用 比例 尺 机 制 来 更 直观 地 实现 这 一 点 。) 


为 了 把 面积 转换 成 半径 ， 关 键 在 于 求 平方 根 。JavaScript 恰好 有 一 个 内 置 的 Math. 
sqrt () 函数 ， 比 如 : Math.sqrt(h - d[1])。 


好 了 ， 下 面 重新 设置 所 有 上 值 : 











“att ("rr", funetion(d) 1{ 
return Math.sqgqrt(h - dl[1]); 


有 


6-33 显示 了 此 时 的 结果 ， 代 码 可 以 参见 23_scatterplot_sqrt.html。 














6-33: 大 小 不 同 的 散 点 图 

这 里 随便 用 SVG 高 度 h 减 去 数据 点 的 > 坐标 值 a[1] 之 后 ， 再 求 其 平方 根 ， 结 果 是 
圆 形 y 坐标 越 大 (在 图 中 位 置 越 靠 下 ) ， 面 积 越 小 (半径 越 短 ) 。 

这 种 使 用 圆 形 面积 来 可 视 化 数据 的 办 法 并 不 是 特别 好 。 毕 竟 ， 我 们 只 是 为 了 演示 ， 
即 怎么 使 用 a 和 使 用 方 括号 来 引用 个 别 的 数据 点 ， 对 数值 应 用 一 些 变换 ， 然 后 再 将 
重新 计算 的 值 (这 里 就 是 上 的 值 ) 返回 给 属性 设 定 方法 。 














6.5.4 标签 
接 下 来 看 一 下 怎么 用 text 元 素 为 数据 点 加 标签 。 在 此 ， 同 样 可 以 采用 之 前 绘制 条 
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形 图 时 的 代码 ， 从 下 面 的 代码 开始 : 














svg.selectAll("text") // <-- 注意 是 "text", 而 非 "circle" 或 "rect" 
.data (dataset) 
.enter () 
.append ("text") // <-- 这 里 也 一 样 ! 


这 行 代 码 首先 查找 SVG 中 的 所 有 text 元 素 (还 没有 呢 )， 然 后 把 这 些 元 素 追 加 到 
每 个 数据 点 上 。 最 后 ，text () 方法 设 定 了 每 个 元 素 的 内 容 : 


.text (function(d) { 
return d[0] + "," + d[1]; 
}) 
看 起 来 有 点 乱 ? 请 容 我 解释 。 同 样 ， 这 里 仍然 使 用 function (qd) 来 访问 每 个 数据 
点 。 然 后 ， 在 匿名 函数 内 部 ， 使 用 arol 和 a[1] 取得 数据 点 数组 的 两 个 值 。 


这 里 的 加 号 (+) 对 于 字符 串 〈 比 如 引号 中 的 喜 号 "，,") 而 言 ， 是 一 个 拼接 操作 符 。 
因此 这 一 行 代码 的 作用 就 是 把 arol 和 a[1] 的 值 拼 起 来 ， 中 间 塞 进去 一 个 和 逗号 。 结 
果 就 像 5,20 或 25,67 这 样 。 


接 下 来 通过 设 定 x 和 yy 值 来 定位 文本 。 这 里 ， 我 们 暂且 使 用 设 定 圆 形 圆心 位 置 的 
d[0] 和 ad[1] 























.attr("x", function(d) { 
return dl[0]; 

}) 

attr("y", function(d) { 
return dl[1]; 


}) 
最 后 ， 再 给 文本 设 定 一 些 样式 : 


.attr("font-family", "sans-serif") 
iattr ("font-SLizer,; VL1DE") 
attr{"fill", "red'"); 


结果 如 图 6-34 所 示 。 虽 然 不 算 漂 亮 ， 但 标签 是 添加 成 功 了 ! 代码 请 参见 24_ 
Scatterplot_labels.html。 








Bb” a @'": 


@™ 和 am 5 


B557 
@20.88 8230,95 wa0, 











图 6-34: 带 标签 的 散 点 图 
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6.6 更 上 一 层 楼 
但 愿 经 过 本 章 的 学 习 ， 大 家 对 D3 的 核心 概念 已 经 有 了 初步 的 理解 : 加 载 数据 、 生 
成 新 元 素 ， 然 后 用 数据 值 派 生出 这 些 元 素 的 属性 值 。 


没 错 ， 图 6-34 很 难说 是 及 格 的 数据 可 视 化 图 形 。 那 张 散 点 图 看 起 来 有 点 费劲 ， 而 代 
码 也 没有 灵活 地 运用 数据 。 坦 率 地 说 ， 我 们 还 没有 超过 一 一 噢 ， 天 哪 一 一 Excel 的 图 
表 向 导 呢 ! 


别 急 呀 ，D3 可 比 图 表 向 导 酷 得 多 〈 更 别提 曲 别针 小 助手 了 )。 不 过 ， 要 生成 一 个 令 
人 侧目 的 交互 式 图 表 ， 还 需要 我 们 继续 深造 ， 学 习 更 多 D3 的 知识 。 想 灵活 地 运用 
数据 ? 下 一 章 我 们 就 学 习 D3 的 比例 尺 。 想 让 散 点 图 一 目 了 然 ? 再 下 一 章 我 们 就 学 
习 D3 的 数 轴 生 成 器 和 数 轴 标 签 。 

现在 大 家 最 好 美美 地 休息 一 会 儿 ， 伸 伸 腹 膊 ， 弯 弯 腰 。 最 好 出 去 散 散步 ， 或 者 来 杯 
咖啡 ， 外 加 一 个 三 明治 。 我 会 在 这 里 等 着 你 (如果 你 不 介意 的 话 )， 等 你 一 回来 ， 咱 
们 就 开始 探索 D3 的 比例 尺 ! 
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第 7 章 


比例 及 





“比例 尺 是 一 组 把 输入 域 映 射 为 输出 范围 的 函数 。” 

这 是 Mike Bostock 对 D3 中 比例 尺 (scale) 给 出 的 定义 ， 实 际 上 要 用 一 两 句 话说 明 
白 什 么 是 比例 尺 并 不 容易 。 

一 般 来 说 ， 任 意 数 据 集中 的 值 不 可 能 恰好 与 图 表 中 的 像素 尺度 一 一 对 应 。 比 例 尺 就 
是 把 这 些 数据 值 映射 为 可 视 化 图 形 中 使 用 的 新 值 的 便捷 手段 。 

D3 的 比例 尺 就 是 那些 你 定义 的 带 有 参数 的 函数 。 定 义 好 之 后 ， 就 可 以 调用 这 些 比例 
尺 函 数 ， 传 入 值 ， 它 们 就 能 返回 按 比例 生成 的 输出 值 。 你 可 以 自己 定义 任意 多 个 比 
例 尺 函 数 。 

听 到 比例 尺 这 个 词 ， 有 人 可 能 会 不 由 自主 地 想到 最 终 图 表 中 的 一 系列 刻度 线 ， 对 应 
一 系列 值 。 不 要 搞 错 ， 这 些 刻度 线 是 坐标 轴 的 一 部 分 ， 而 坐标 轴 只 是 比例 尺 的 一 种 
形象 的 表示 。 比 例 尺 实际 上 代表 着 一 种 数学 关系 ,不 可 能 直接 输出 可 见 的 图 形 。 大 
家 可 以 把 比例 尺 和 坐标 轴 想 象 成 两 样 不 同 但 相关 的 东西 。 

本 章 只 讨论 线性 比例 尺 ， 这 是 一 种 最 常用 也 最 容易 理解 的 比例 尺 。 理 解 了 线性 比例 
尺 ， 其 他 什么 序数 、 对 数 、 平 方 根 比 例 尺 的 ， 全 是 小 菜 一 碟 。 


7.1 苹果 和 像素 
假设 以 下 数据 集 反 映 的 是 路 边 水 果 排 每 月 卖 出 的 苹果 数量 : 


var dataset = [ 100, 200, 300, 400, 500 ]; 
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首先 ， 这 是 个 重大 新 闻 ， 因 为 这 个 小 小 的 水 果 摊 每 月 居然 都 能 多 卖 出 100 个 苹果 ! 
生意 果然 兴隆 。 为 了 展示 销售 业绩 ， 你 想 通 过 条 形 图 来 表现 苹果 销量 直线 上 涨 的 趋 
势 ， 即 每 个 数据 值 对 应 着 相应 条 形 的 高 度 。 


到 目前 我 止 ， 我 们 一 直 都 在 直接 显示 数据 值 ， 忽 略 了 单位 的 差异 。 换 名 话说 ， 卖 出 
500 个 苹果 ， 相 应 的 条 形 就 是 500 像素 高 。 


这 样 当 然 可 以 ， 但 要 是 下 个 月 卖 出 了 600 个 苹果 呢 ? 要 是 一 年 后 卖 出 1800 个 苹果 
呢 ? 那 用 户 可 能 就 得 换 一 台大 显示 器 ， 才 能 看 到 完整 的 条 形 图 ! 


这 时 候 就 要 用 到 比例 尺 了 ， 因 为 苹果 不 是 用 像素 来 衡量 的 〈 当 然 橙子 也 不 行 )， 所 以 
就 需要 通过 比例 尺 来 表达 和 实现 两 者 之 间 的 映射 。 


7.2 值 域 和 范围 


比例 尺 的 输入 值 域 (input domain) 指 可 能 的 输入 值 的 范围 。 以 前 面 芋 果 的 数据 为 
例 ， 输 入 值 域 大 致 为 100 到 500 ( 即 数据 集中 最 小 和 最 大 值 )， 或 者 0 到 500。 


比例 尺 的 输出 范围 (output range) 指 输出 值 可 能 的 范围 ， 一 般 以 用 于 显示 的 像素 为 
单位 。 输 出 范围 完全 取决 于 你 ， 因 为 你 是 信息 可 视 化 的 设计 师 。 如 果 你 想 让 最 短 的 
苹果 条 高 为 10 像素 ， 让 最 高 的 苹果 条 高 为 350 像素 ， 那 就 可 以 把 输出 范围 设 定 为 
10 到 350。 

下 面 我 们 就 来 分 析 一 下 输入 值 域 为 [100,.500]， 输 出 范围 为 [10,350] 的 情况 。 要 把 输 
入 的 最 小 值 100 映射 到 这 个 比例 尺 上 ， 应 该 返回 最 小 的 值 10。 如 果 输 入 为 500， 它 
应 该 返回 350。 要 是 输入 为 300 呢 ? 那 输出 就 是 180。( 因 为 300 是 值 域 的 中 值 ， 而 
180 是 范围 的 中 值 。) 


如 图 7-1 所 示 ， 可 以 在 平行 的 数 轴 中 把 值 域 和 范围 的 对 应 关系 绘制 出 来 。 












































输入 值 域 
100 300 500 
10 180 350 
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7-1: 输入 值 域 和 输出 范围 的 数 轴 
提醒 一 下 ， 为 了 不 让 自己 的 大 脑 搞 混 输入 值 域 和 输出 范围 ， 建 议 你 做 个 小 游戏 。 我 
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说 “输入 ”， 你 就 说 “ 值 域 "。 我 再 说 “和 输出”， 你 就 说 “范围 ”。 准 备 好 了 吗 ? 开始 : 
输入 ! 值 域 ! 
输出 ! 范围 ! 
输入 ! 值 域 ! 
输出 ! 范围 ! 








记 住 了 ? 好 。 


7.3， 凤 一 化 

如 果 你 熟悉 归 一 化 normalization) 的 概念 ， 那 太 好 了 ， 因 为 对 于 线性 比例 尺 来 说 ， 
就 是 那个 意思 。 

归 一 化 就 是 根据 可 能 的 最 小 值 和 最 大 值 ， 把 某 个 数值 映射 为 介 于 0 和 1 之 间 的 一 个 
新 值 的 过 程 。 比 如 ， 一 年 365 天 ， 那 么 310 天 映射 过 来 就 是 0.85， 即 85%。 


对 于 线性 比例 尺 ，D3 可 以 帮 有 我 们 处 理 归 一 化 过 程 中 的 数学 计算 : 输入 值 根据 值 域 先 
进行 归 一 化 ， 然 后 再 把 归 一 化 之 后 的 值 对 应 到 输出 范围 。 


7.4 创建 比例 尺 


D3 有 一 个 比例 尺 国 数 生 成 器 ， 通 过 aa .scale 来 访问 。 要 生成 一 个 比例 尺 ， 在 
d3.scale 后 面 加 上 要 创建 的 比例 尺 类 型 即 可 。 建 议 读 者 现在 打开 示例 页 面 01_ 
scale_test.html1， 在 控制 台 里 试 试 下 面 的 代码 : 











Var Scale = d3.scale.linear(); 
蕉 喜 ! 现在 scale 就 是 一 个 可 以 接收 参数 的 函数 了 。( 不 要 被 var 迷惑 了 ， 虽 然 它 
在 JavaScript 中 用 于 创建 变量 ,但 变量 也 可 以 保存 函数 。) 

scale(2.5); //Returns 2.5 
因为 还 没有 设 定 值 域 和 范围 ， 所 以 这 个 函数 会 按照 1:1 的 比例 映射 输入 和 输出 。 换 
句 话说 ， 输 入 什么 ， 输 出 仍然 是 什么 。 


设置 比例 尺 的 值 域 需要 调用 aomain () 方法 ， 并 将 值 域 以 数组 形式 传 给 它 。 假 设 值 
域 是 100 到 500， 那 么 就 可 以 这 样 写 代码 : 





Scale.dqomain( [100，500] ) 





设 定 输出 范围 的 方式 类 似 ， 但 要 调用 *ange () 方法 : 





scale.range([10, 350]); 
这 些 步骤 可 以 独立 完成 ， 也 可 以 连 绥 起 来 完成 : 
Var scale = d3.scale.linear() 


.domain([100, 500]) 
.range([10, 350]); 


不 管 怎 么 设 定 ， 现 在 的 比例 尺 已 经 准备 就 绕 了 1 





scale (100); // 返回 10 
scale(300); // 返回 180 
scale(500); // 返回 350 


一 般 来 说 ， 我 们 都 会 在 attr() 或 其 他 类 似 方 法 中 调用 比例 尺 函 数 ， 而 不 会 像 这 样 
独立 调用 它 。 好 了 ， 下 面 来 看 看 怎么 修改 上 一 章 散 点 图 的 代码 ， 从 而 动态 地 应 用 比 
例 尺 。 


7.5 缩放 散 点 图 


回顾 一 下 创建 散 点 图 的 数据 集 : 








Var dataset = 
[5, 20], [480, 90], [250, 50], [100, 33], [330，95] ， 
[410,; 12]; [475; 44]; [25; 67],; [85; 21],; [220, 88] 
]; 
还 记得 吧 ， 这 个 数据 集 是 用 数组 的 数组 表示 的 。 我 们 是 把 每 个 数组 的 第 一 个 值 映射 
到 了 x 轴 ， 把 第 二 个 值 映射 到 了 y 轴 。 现 在 要 应 用 比例 尺 了 ， 先 从 x 轴 开始 。 


目测 一 下 x 值 ， 大 臻 是 从 5 到 480， 因 此 合理 的 值 域 应 该 是 0 到 500， 对 吧 ? 


为 什么 那么 看 着 我 ? 噢 ， 你 想 让 自己 的 代码 更 灵活 更 有 伸缩 性 吧 ， 这 样 即 使 将 来 数 
据 集 有 变化 也 不 用 修改 代码 。 你 真 聪明 ! 你 考虑 得 很 周全 ,假如 我 们 在 给 路 边 的 那 
个 苹果 摊 设 计 一 个 数据 展示 板 ， 那 么 应 该 让 代码 适应 苹果 销量 的 大 幅 增长 。 而 图 表 
呢 ， 无 论 是 卖 出 5 个 苹果 还 是 100 成 个 人 苹果， 也 都 应 该 能 够 正常 显示 。 











7.5.1 ad3 .min() 和 aqd3 .max() 

既然 不 想 给 值 域 设 置 固定 的 值 ， 那 可 以 使 用 两 个 方便 的 数组 函数 : da .min() 和 
da .max() ， 让 它们 帮 你 动态 分 析 数 据 集 。 比 如 ， 下 面 的 代码 会 循环 数组 中 的 每 个 x 
值 ， 返 回 其 中 最 大 的 那个 : 
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d3.max(dataset, function (gd) { 
return d[0]; // 3 引用 租 套 数组 中 的 第 一 个 值 
] ) ; 
以 上 代码 会 返回 480， 因 为 480 是 数据 集中 最 大 的 x 值 。 下 面 解释 一 下 代码 的 执行 
过 程 。 


D3 的 min() 和 max() 原理 相同 ， 都 接受 一 到 两 个 参数 。 第 一 个 参数 必须 是 对 数组 
也 就 是 数据 集 的 引用 。 假 如 有 一 个 简单 的 一 维 数组 ， 如 [7， 8，4，5，2]， 那 很 
明显 就 知道 怎么 比较 这 些 值 的 大 小 ， 不 需要 第 二 个 参数 。 比 如 : 





var simpleDataset = [7, 8, 4, 5, 2]; 
d3.max(simpleDataset); // 返回 8 


max() 国 数 只 是 简单 地 循环 数组 中 的 每 个 值 ， 然 后 找 出 其 中 最 大 的 那个 。 


可 是 ， 我 们 的 数据 集 并 不 是 个 简单 的 数值 数组 ， 而 是 一 个 数组 的 数组 。 调 用 
d3 .max (dataset) 可 能 会 得 到 不 想 要 的 结果 : 





var dataset = [ 
[5, 20], [480, 90], [250, 50], [100, 33], [330, 395], 
[10, 2],. [475, 44], [25, 67], L855 2] [220., :88] 
下 :> 
d3.max(dataset); // 返 回 [85，21] ， 什 …… 么 ? 





要 告诉 max() 想 比 较 哪个 值 ， 就 必须 传 入 第 二 个 参数 ， 也 就 是 一 个 存 取 器 函数 : 


d3.max(dataset, function(d) { 
return dl[0]; 


的 
这 个 存 取 器 函数 是 一 个 匿名 函数 ，max () 会 把 数组 中 的 每 个 元 素 ( 即 这 里 的 da) 交 
给 它 。 存 取 器 函数 的 目的 是 指定 比较 哪个 值 。 对 我 们 的 数据 集 而 言 ， 需 要 比较 x 值 ， 
也 就 是 舱 套 数组 的 第 一 个 值 ， 位 置 为 0。 因 此 存 取 器 函数 就 是 这 样 的 : 








function(d) { 
return d[0]; // 





回 租 套数 组 中 的 第 一 个 值 


六 


} 
等 等 ， 这 个 函数 的 语法 在 生成 散 点 图 的 时 候 见 过 啊 ， 当 时 是 用 匿名 函数 来 取得 并 返 





attr("ex", function(d) +{ 
return dl[0]; 

}) 

attr(ney", function(d) 1{ 
return dl[1]; 


}) 





好 记性 ， 这 是 D3 中 一 个 常用 的 模式 。 用 不 了 多 长 时 间 ， 你 就 会 对 代码 中 随处 可 见 
的 匿名 函数 习以为常 了 。 


7.5.2 ”设置 动态 缩放 
把 我 们 刚刚 介绍 的 知识 综合 起 来 ， 就 可 以 创建 一 个 动态 映射 x 轴 值 的 比例 尺 函 数 : 
Var xScale = d3.scale.linear() 
.domain([0, d3.max(dataset, function (qd) { return 


d[0l; })]) 


.range ([0, w]); 


首先 ， 我 们 把 这 个 比例 尺 函 数 命 名 为 了 xscale。 当 然 ， 你 可 以 根据 自己 的 需要 来 
命名 ,但 xscale 可 以 帮 我 记 住 这 个 函数 的 作用 。 

其 次 ， 这 里 同时 设 定 了 值 域 和 范围 ， 使 用 的 是 包含 两 个 值 的 数组 。 

第 三 ， 我 们 把 值 域 的 最 小 值 设 定 为 0 了 。 (实际 上 ， 在 这 里 也 可 以 使 用 min () 来 生 
成 动态 的 值 .) 而 值 域 的 最 大 值 则 设 定 为 数据 集中 的 最 大 值 (目前 是 480， 将 来 可 能 


会 变 )。 





最 后 ， 注 意 一 下 和 输出 范围 被 设 定 为 0 到 w ( 即 SVG 的 宽度 )。 


接 下 来 可 以 使 用 非常 类 似 的 代码 为 y 轴 创 建 比例 尺 函数 : 





var yScale = d3.scale.linear() 
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
‘Tangel( [0s i] ); 


要 注意 的 是 ，max() 方法 这 一 次 引用 的 是 ar1]， 即 艇 套数 组 的 y 值 。 类 似 地 ， 
zange () 方法 中 的 最 大 值 设 定 成 了 h， 而 不 是 w。 


好 啦 ， 比 例 尺 函数 定义 完成 ! 现在 该 把 它们 派 上 用 场 了 。 


7.5.3 整合 缩放 后 的 值 
现在 要 做 的 就 是 在 散 点 图 代码 的 基础 上 ， 修 改 一 下 为 每 个 值 创建 圆 形 的 代码 。 比 如 ， 
原来 是 


.attr("cx", function(d 


) { 
return d[0]; // 返 回 数据 集中 的 原始 值 











}) 
为 了 使 用 缩放 后 的 值 (而 不 是 原始 值 )， 要 改 成 这 样 : 


attr("cx", function(d) { 





112 | 第 7 章 





回 缩放 后 的 值 


六 


return xSscale(d[0]); // 


} 
同样 ， 对 于 y 轴 的 代码 


‘attr("cy", function(d) { 
return dl[1]; 


} 
要 改 成 这 样 : 


attr("cy", function(g) { 
return yScale(d[1]); 


} 
为 了 比例 协调 ， 下 面 再 对 设置 文本 标签 坐标 的 代码 作 相同 修改 ， 即 原来 的 


-attr("x", funcetion(d) { 
return dl[0]; 


}) 
attr("y", function(d) 1{ 
return dl[1]; 


} 
要 改 成 这 样 : 


.attr("x", function(d) { 
return xScale(d[0]); 

}) 

.attr("y", function(d) { 
return yscale(d[1]); 


}) 
完事 了 | 


完整 的 代码 请 参考 02_scaled_plot.html。 视 觉 上 呢 ， 图 7-2 的 结果 可 能 跟 最 初 的 散 点 
图 一 样 令 人 失望 ! 可 是 我 们 毕竟 已 经 取得 了 进步 ， 只 不 过 表面 上 看 不 出 来 而 已 。 
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图 7-2: 使 用 了 x 和 yy 比例 尺 的 散 点 图 


7.6 ”修饰 图 表 
注意 到 了 吗 ， 现 在 较 小 的 y 值 在 图 表 上 方 ， 而 较 大 的 y 值 在 图 表 下 方 。 既 然 我 们 使 
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用 了 D3 的 比例 尺 ， 那 么 要 反 转 它们 就 易 如 反 擎 了 。 只 要 把 yscale 的 输出 范围 由 





.range([0, nh]); 
改 为 
‘range (lh; 0])s 


即 可 。 代 码 参 见 03_scaled_plot_inverted.html， 结 果 如 图 7-3 所 示 。 








B20.88 > 1 
@567 


> 6 重 " 72 


7-3: 反 转 y 轴 比例 尺 之 后 的 散 点 图 


没 错 ， 现 在 yscale 对 较 小 的 输入 会 返回 较 大 的 输出 值 ， 这 样 才 会 把 相应 的 圆 形 和 
文本 推 向 下 方 ， 接 近 图 形 的 底部 。 我 知道 ， 这 没有 什么 难 理解 的 ! 


可 是 有 些 圆 形 被 切 掉 了 一 部 分 。 为 此 ， 得 引入 一 个 边 距 变 量 : 

















var padding = 20; 


以 便 在 设置 两 个 比例 尺 的 时 候 加 入 边 距 。 边 距 可 以 把 圆 形 向 里 推 ， 使 它们 远离 SVG 
的 四 边 ， 从 而 避免 被 切 掉 。 








原来 xscale 的 范围 是 *ange([0，w]) ， 现 在 改 成 这 样 : 
.range([padding, w - padding]); 

原来 yscale 的 范围 是 range ( [h，0]) ， 现 在 改 成 这 样 : 
.range([h - padding, padding]); 


这 样 就 可 以 在 SVG 的 上 、 下 、 左 、 右 四 边 分 别 增加 20 像素 的 边 距 。 的 确 如 此 ， 如 
图 7-4 所 示 ! 
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7-4: 加 入 了 边 距 的 散 点 图 
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但 最 右边 的 文本 标签 仍然 会 被 切 掉 ， 那 就 把 xscale 的 边 距 加 倍 吧 ， 结 果 如 图 7-5 
所 示 : 





.range([padding, w - padding * 2]); 
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7-5: 加 入 更 大 边 距 的 散 点 图 





uy 








这 里 讲 的 加 入 边 距 的 方法 很 简单 ， 但 不 够 完善 。 因 为 我 们 需要 能 够 更 多 地 
控制 图 表 每 个 边 (上 、 下 、 左 、 右 ) 的 边 距 。 那 么 就 有 必要 把 指定 这 些 值 
的 方法 提取 出 来 ， 以 便 在 不 同 项 目 中 重用 。 虽 然 本 书 到 现在 一 直 没 有 采用 
Mike Bostock 的 外 边 距 约定 (http://bl.ocks.org/mbostock/3019563)， 我 还 
是 建议 大 家 看 ， 或许 对 你 有 用 。 





















































好 多 啦 ! 完整 代码 可 以 参考 04_scaled_plot_padding.html。 不 过 ， 我 还 想 再 改动 一 个 
地 方 。 我 们 原来 是 把 每 个 圆 形 的 半径 设置 为 y 值 的 平方 根 (这 多 少 有 点 走 偏 门 的 味 
道 ， 因 为 对 可 视 化 帮助 不 大 )， 为 什么 不 为 半径 也 创建 一 个 自 定义 的 比例 尺 呢 ? 








var rScale = d3.scale.linear() 
.domain([0, d3.max(dataset, function (d) { return 


“range( [2. 51); 


然后 ， 再 像 这 样 设 定 圆 形 半 径 : 





.attr("r", function (d) { 
return rScale(d[1]); 
} 
这 太 好 了 ， 因 为 可 以 保证 所 有 圆 形 的 半径 永远 都 会 介 于 2 和 5 之 间 。( 或 许 也 有 例 
外 ， 可 以 参考 后 面 介 绍 的 clamp () 。) 换 名 话说， 数据 值 为 0〈 最 小 的 输入 ) 时 ， 
形 半径 为 2 像素 (或 直径 为 4 像素 )。 而 最 大 的 数据 值 对 应 的 圆 形 半径 是 5 像素 (或 
直径 为 10 像素 )。 


看 吧 ， 图 7-6 展示 了 对 视觉 属性 第 一 次 应 用 比例 尺 的 效果 。( 代 码 参 见 05_scaled_ 
plot_radii.html, ) 
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图 7-6: 对 圆 形 半径 应 用 比例 尺 后 的 散 点 图 
最 后 ， 我 真 担心 比例 尺 的 威力 还 没有 让 你 开窍 ， 所 以 想 再 给 数据 集 增 加 一 个 数据 点 : 


[600，150] 。 
怎么 样 ? 看 看 06_scaled_plot_big.html 吧 ， 效 果 如 图 7-7 所 示 。 注 意 啊 ， 增 加 了 碳 


上 角 的 数据 点 之 后 ， 原 来 的 那些 圆 形 都 向 左 向 下 移动 而 且 缩 得 更 紧 了 ， 这 样 才能 维 
护 所 有 数据 点 之 间 的 相对 位 置 关 系 。 
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图 7-7: 添加 了 大 值 之 后 的 散 点 图 


该 向 大 家 透露 最 后 一 个 秘密 了 : 现在 ， 你 可 以 随意 修改 SVG 的 大 小 ， 而 图 表 中 的 
= 7-8 中 ， 我 们 把 SVG 的 高 度 值 n 从 100 增 大 到 了 
300， 其 他 都 没 变 
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图 7-8: 成 比例 放大 后 的 散 点 图 


哈哈 ， 怎 么 样 ? 代码 参见 07_scaled_plot_large.html。 但 愿 看 到 这 些 之 后 ， 你 能 意识 

到 : 如 果 用 户 说 想 要 一 个 800 像素 而 不 是 600 像素 宽 的 图 ， 你 就 不 用 因为 改 代 码 而 
熬 一 个 通宵 了 。 没 错 ， 因 为 有 了 我 〈 以 及 D3 内 置 的 聪明 方法 ) 你 可 以 多 睡 一 会 了 。 
身体 是 革命 的 本 钱 ， 记 着 我 的 好 啊 。 
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7.7 ”其 他 方法 


d3.scale.1linear() 还 有 几 个 非常 方便 的 方法 ， 有 必要 在 这 里 简单 介绍 一 下 。 





。 Dnice() 
告诉 比例 尺 取 得 为 range () 设置 的 任何 值 域 ， 把 两 端的 值 扩展 到 最 接近 的 整数 。 
根据 D3 的 维基 :“ 比 如 ， 值 域 [0.20147987687960267，0.996679553296417] 
的 优化 值 域 为 [0 .2，1] 。” 这 个 方法 对 正常 人 都 有 用 ， 因 为 人 不 是 计算 机 ， 看 到 
0.20147987687960267 这 样 的 数 你 一 定 会 头 大 。 





。 rangeRound() 
用 rangeRound() 代替 range() 后 ， 则 比例 尺 输出 的 所 有 值 都 会 舍 入 到 最 接近 
的 整数 值 。 对 输出 值 取 整 有 利于 图 形 对 应 精确 的 像素 值 ， 避 免 边缘 出 现 模 糊 不 清 
的 锯齿 。 


。 clamp() 
默认 情况 下 ， 线 性 比例 尺 可 以 返回 指定 范围 之 外 的 值 。 例 如 ， 假 如 给 定 的 值 位 于 
输入 值 域 之 外 ， 那 么 比例 尺 也 会 返回 一 个 位 于 输出 范围 之 外 的 值 。 不 过 ， 在 比例 
尺 上 调用 clamp (true) 后 ， 就 可 以 强制 所 有 输出 值 都 位 于 指定 的 范围 内 。 这 意味 
着 超出 范围 的 值 ， 会 被 取 整 到 范围 的 最 低 值 或 最 高 值 (总 之 是 最 接近 的 那个 值 ) 。 


使 用 上 述 任 何 一 个 方法 ， 只 要 把 它们 连 级 到 定义 原始 比例 尺 的 方法 链 即 可 。 比 如 ， 
要 使 用 nice() ， 可 以 这 样 : 











Var scale = d3.scale.linear() 
.domain( [0.123, 4.567]) 
.range([0, 500]) 
.nice(); 


7.8 其 他 比例 尺 
除了 (前 面 讨论 的 ) 线性 (1inear) 比例 尺 ，D3 还 内 置 了 另外 几 个 比例 尺 方法 。 


。 sqrt 


平方 根 比例 尺 。 


。 pow 


需 比 例 尺 ， 适 合 值 以 指数 级 变化 的 数据 集 。 


。 log 
对 数 比 例 尺 。 





。 gquantize 


输出 范围 为 独立 的 值 的 线性 比例 尺 ， 适 合 想 把 数据 分 类 的 情形 





。 quantile 


与 quantize 类 似 , 但 输入 值 域 是 独立 的 值 ， 适 合 已 经 对 数据 分 类 的 情形 


。 ordinal 


使 用 非 定量 值 (如 类 名 ) 作为 输出 的 序数 比例 尺 ， 非 常 适合 比较 苹果 和 桔子 。 


。 qdq3.scale.category1l0()、dq3.scale.category20()、dq3.scale. 
category20b() 和 d3.scale.category20c() 


能 够 输出 10 到 20 种 类 别 颜色 的 预 设 序数 比例 尺 ， 非 常 方便 。 


。 d3.time.scale() 
a rare di pe 
领略 了 比例 尺 的 威力 之 后 ， 该 通过 一 些 东西 来 表达 它们 了 ， 通 过 什么 呢 ? 对 ， 
数 轴 ! 
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数 轴 


掌握 了 D3 比例 尺 的 用 法 ， 我 们 制作 出 了 如 图 8-1 所 示 的 散 点 图 。 
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图 8-1: 大 型 、 成 比例 缩放 的 散 点 图 


下 面 该 添加 水 平和 垂直 的 数 轴 了 ， 而 且 也 该 把 那些 充斥 于 
销 了 。 


8.1 数 轴 简介 





图 表 间 的 红色 数字 一 笔 勾 


与 比例 尺 相似 ，D3 的 数 轴 实 际 上 也 是 由 你 来 定义 参数 的 函数 。 但 与 比例 尺 不 同 的 
是 ， 调 用 数 轴 函数 并 不 会 返回 值 ， 而 是 会 生成 数 轴 相 关 的 可 见 元 素 ， 包 括 轴线 、 标 


签 和 刻度 。 
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但 要 注意 ， 数 轴 国 数 只 适用 于 SVG 图 形 ， 因 为 它们 生成 的 都 是 SVG 元 素 。 同 样 ， 
数 轴 是 设计 与 定量 比例 尺 (与 序数 比例 尺 相对 ) 配合 使 用 的 。 


8.2 ” 设 定 数 轴 


使 用 aa .svg.axis() 可 以 创建 通用 的 数 轴 函数 : 








var xAxis = d3.svg.axis(); 


要 使 用 数 轴 ， 最 起 码 要 告诉 它 基 于 什么 比例 尺 工 作 。 在 此 ， 我 们 把 绘制 散 点 图 时 定 
义 的 xscale 传 给 它 : 





xAxis.scale (xScale); 


还 可 以 继 纪 ee 默认 位 置 是 底部 ， 也 就 是 标签 会 
现在 轴线 下 方 。( 虽 然 是 默认 值 ， 但 明确 指定 也 不 会 引起 异常 。) 水 平 数 轴 的 位 置 可 
和 en， 


xAxis.orient ("bottom"); 
当然 ， 把 这 些 方法 连 级 在 一 行 会 更 简洁 : 


Var xAxis = d3.svg.axis() 
.Scale (xScale) 
.orient ("bottom"); 


最 后 ， 要 想 实 际 生成 数 轴 并 把 那些 线条 和 标签 插入 到 SVG 中 ， 必 须 调 用 xaxis 国 
数 。 这 一 点 与 使 用 比例 尺 国 数 类 似 ， 即 要 先 配置 一 番 (设置 参数 )， 然 后 再 通过 调用 
将 其 付 诸 实用 。 


我 想 把 这 些 代码 放 到 脚本 底部 ， 以 便 在 SVG 中 的 其 他 元 素 都 生成 之 后 再 生成 数 轴 ， 
这 样 数 轴 就 可 以 出 现在 “上 面 ” 了 : 


svg.appendq("g") 
.Call (xAxis); 











的 确 看 着 有 点 不 那么 舒服 。 你 可 能 会 加， 为 什么 调用 数 轴 函 数 和 调用 比例 尺 函 数 看 
起 来 那么 不 一 样 呢 ? 听 我 解释 : 因为 数 轴 国 数 实 际 上 会 在 屏幕 上 绘制 一 些 东 西 ( 通 
过 把 SVG 元 素 添 加 到 DOM) ， 所 以 我 们 需要 指定 在 DOM 的 什么 地 方 插入 这 些 新 元 
素 。 这 显然 跟 比 例 尺 国 数 不 一 样 ， 比 例 尺 〈 比 如 xscale () )， 只 是 根据 输入 值 来 计 
算 并 返回 值 ， 主 要 是 在 其 他 函数 里 调用 ， 不 会 影响 DOM。 


3 前 面 的 代码 首先 引用 了 svg， 即 DOM 中 的 SVG 元 素 。 然 后 ，append() 在 
这 个 元 素 的 末尾 追加 了 一 个 新 的 g 元 素 。 在 SVG 标签 内 ，g 元 素 就 是 一 个 分 组 























120 | 第 8 章 


(group) 元 素 。 分 组 元 素 是 不 可 见 的 ， 跟 1ine、rect 和 circle 不 一 样 ， 但 它 
有 两 大 用 途 : 一 是 可 以 用 来 包含 (或 “组 织 ”) 其 他 元 素 ， 好 让 代码 看 起 来 简洁 整 
齐 ; 二 是 可 以 对 整个 分 组 应 用 变换 ， 从 而 影响 到 该 组 中 所 有 元 素 (1ine、rect 和 
circle) 的 视觉 表现 。 关 于 变换 ， 我 们 稍 后 就 会 介绍 。 


创建 了 新 的 g 元素 后 ， 直 接 在 这 个 元 素 上 面 调用 了 call() 方法 。 那 么 call() 有 
什么 用 呢 ? 


D3 的 cal1() 函数 会 取得 (比如 刚才 代码 链 中 ) 传递 过 来 的 元 素 ， 然 后 再 把 它 交 给 
其 他 国 数 。 对 我 们 这 例子 而 言 ， 传 递 过 来 的 元 素 就 是 新 的 分 组 元 素 g (虽然 这 个 元 
素 不 是 必需 的 ， 但 鉴于 数 轴 函数 需要 生成 很 多 线条 和 数值 ， 有 了 它 就 可 以 把 所 有 元 
素 都 封装 在 一 个 分 组 对 象 内 )。 而 call () 接着 把 g 交 给 了 xAxis 函数 ， 也 就 是 要 
在 g 元素 里 面 生 成 数 轴 。 

假设 你 喜欢 把 代码 写 得 让 人 不 容易 看 懂 ， 那 么 可 以 把 前 面 的 两 段 合 成 下 面 这 一 段 : 

svg.append ("g") 
.call(d3.svg.axis() 


.scale (xScale) 
.orient ("bottom")); 


瞧 ， 一 行 代码 就 定义 并 调用 了 数 轴 函数 。 不 过 ， 考 虑 到 我 们 大 脑 的 喜好 ， 还 是 像 前 
面 那样 先 定 义 函数 ， 然 后 再 调用 它 更 好 理解 。 


无 论 如 何 ， 图 8-2 就 是 现在 的 结果 。 代 码 可 以 参考 01_axes.html。 
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图 8-2: 简单 ， 但 不 好 看 的 数 轴 


8.3 ”修整 数 轴 
严格 来 讲 ， 那 确实 是 一 个 数 轴 。 但 从 实用 角度 看 ， 这 家 伙 既 不 好 看 ， 也 不 中 用 。 接 
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下 来 看 看 怎么 给 它 打扮 一 下 。 先 给 新 创建 的 g 元 素 指定 一 个 axis 类 吧 ， 这 样 好 给 
它 添加 CSS 样式 : 
svg.append ("g") 


.attr("class"，"axis") // 指定 "axis" 类 
.Call (xAxis),，; 


然后 ， 在 -head> 中 的 <style> 标签 里 写 两 条 CSS 样式 规则 : 


.axis Path， 

.axis line { 
fill: none; 
stroke: black; 
shape-rendering: crispEdges; 


} 


.axis text { 
font-family: sans-serif; 
font-size: 11px; 
} 
现在 知道 把 所 有 数 轴 元 素 都 组 织 在 一 个 g 分 组 中 的 好 处 了 吧 ? 这 样 只 要 使 用 简单 的 
CSS 选择 符 .axis 就 能 为 其 中 的 任何 元 素 应 用 样式 。 数 轴 本 身 是 由 path、1ine 和 
text 元 素 构成 的 ， 因 此 上 面 CSS 瞄准 了 这 三 个 元 素 。 其 中 ， 路 径 (path) 和 线条 
(Line) 可 以 共用 相同 的 规则 ， 而 文本 (text) 则 有 自己 的 字体 和 字号 设置 。 


注意 到 了 吗 ， 通 过 CSS 给 SVG 元 素 应 用 样式 时 ， 只 能 使 用 SVG 的 属性 名 ， 而 不 能 
使 用 常规 的 CSS 属性 。 要 注意 的 是 ， 虽 然 很 多 属性 在 CSS 和 SVG 中 的 名 字 相 同 ， 
但 也 有 一 些 不 相同 。 比 如 ， 要 使 用 常规 的 CSS 属性 设置 文本 颜色 ， 那 应 该 这 样 写 : 


P { 
color: olive; 
} 


这 样 就 给 所 有 段落 p 的 文本 设 定 了 橄榄 绿色 (olive)。 但 同样 的 属性 如 果 应 用 给 
SVG 元 素 ， 比 如 


text { 
color: olive; 


} 
不 会 有 什么 效果 ， 因 为 color 不 是 SVG 能 够 识别 的 属性 名 。 这 时 候 ， 必 须 使 用 
SVG 中 不 同名 但 作用 一 样 的 £11 属性 : 


text { 
fill: olive; 








} 
如 果 你 在 给 SVG 元 素 应 用 样式 时 ， 发 现 CSS 代码 根本 不 起 作用 ， 我 劝 你 不 要 心急 。 
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深呼吸 ， 稍 等 一 下 ， 再 仔细 有 瞧 瞧 那 些 属 性 名 ， 一 定 要 保证 是 SVG 的 ， 而 不 是 CSS 
的 。( 要 了 解 SVG 都 有 哪些 属性 ， 可 以 参考 MDN 网 站 : https://developer.mozilla. 
org/en-US/docs/SVG/Attribute 。) 


这 里 用 到 的 shape-rendering 也 是 一 个 奇怪 的 SVG 属性 。 使 用 它 是 为 了 保证 数 轴 
和 刻度 线 精确 到 像素 级 。 不 要 给 我 一 个 模糊 的 数 轴 ! 


用 CSS 打扮 后 的 数 轴 如 图 8-3 所 示 。 
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8-3: 清 爽 一些 的 数 轴 


好 些 了 ,但 数 轴 顶部 的 线 被 切 掉 了 ， 而 且 数 轴 本 来 应 该 显示 在 图 表 底 下 嘛 。 这 时 候 ， 
就 该 用 到 SVG 变换 (transform) 了 。 只 要 添加 一 行 代码 ， 就 可 以 把 整个 数 轴 分 组 平 
移 到 图 表 下 方 : 
svg.append ("g") 
.attr("class", "axis") 
.attr("transform", "translate(0," + (h - padding) + ")") 
.call (xAxis); 
新 增 的 这 行 代 码 在 attr() 中 设置 了 gg 元素 的 届 性 transform。SVG 中 的 变换 功 
能 非常 强大 ， 有 多 种 不 同 的 变换 方式 ， 包 括 缩放 和 旋转 。 但 我 们 暂时 只 介绍 平移 
(translation) 变换 ， 它 可 以 把 整个 g 分 组 向 下 移动 一 定 距 离 。 
平移 变换 的 语法 很 简单 ， 就 是 translate (x,y)， 其 中 x 和 y 的 含义 都 非常 明确 ， 
就 是 要 把 元 素 移动 到 的 新 位 置 的 x 和 yy 坐标。 因此， 在 DOM 中 我 们 会 看 到 g 元 素 
动态 添加 了 如 下 代码 : 
<g class="axis" transform="translate(0,280)"> 


由 此 可 见 ，g.axis 不 会 水 平移 动 ， 但 会 向 下 移动 280 像素 ， 正 好 移 到 图 表 底 部 。 
下 面 大 概 解 释 一 下 设置 平移 变换 的 代码 : 
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.attr("transform", "translate(0," + (h - padding) + ")") 


注意 这 里 使 用 了 (n-padding)， 这 是 要 把 分 组 的 顶 边 y 坐标 设置 为 n， 即 整个 
SVG 元 素 的 高 度 一 一 然后 ， 再 减 去 我 们 前 面 定 义 的 边 距 值 (padaing)。 经 过 计算 ， 
(hn-padding) 等 于 280， 再 跟 其 他 字符 串 拼 接 起 来 ， 就 得 到 了 最 终 的 变换 属性 值 : 


translate(0,280)。 


图 8-4 所 示 的 结果 看 起 来 舒服 多 了 ! 完整 代码 请 查看 02_axes_bottom.html 吧 。 
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8-4: 清爽 怡 人 的 数 轴 来 了 


8.4 优化 刻度 


数 轴 的 刻度 线 (tick) 是 用 来 传达 信息 的 ， 但 也 不 是 越 多 越 好 ， 多 过 某 个 数量 ， 刻 
度 线 反 而 会 让 图 表 显 得 混乱 。 到 现在 为 止 ， 我 们 还 没有 指定 数 轴 上 要 显示 多 少 根 刻 
度 线 ， 也 没有 指定 两 根 刻 度 线 的 间距 。 就 在 我 们 全 无 指示 的 情况 下 ，D3 自动 检测 
了 比例 尺 xscale， 从 而 作出 了 有 数量 依据 的 判断 ， 帮 我 们 确定 了 要 画 多 少 刻度 线 ， 
以 及 刻度 线 之 间 的 间隔 (这 里 是 50 像素 ) 。 


当然 ， 你 可 以 干预 数 轴 的 任何 方面 。 比 如 ， 使 用 ticks () 方法 就 可 以 粗略 地 指定 刻 
度 线 的 数量 : 


Var xAxis = d3.svg.axis() 
.Scale (xScale) 
.orient ("bottom" 


.ticks(5); // 引路 地 设置 刻度 线 的 数量 














完整 代码 请 参见 03_axes_clean.html。 


过 图 8-5 可 以 看 到 ， 尽 管 我 们 设置 了 5 根 刻度 线 ， 但 D3 则 擅自 作 主 ， 画 出 了 7 
根 。 这 是 D3 在 保护 你 呢 ， 因 为 它 发 现 5 根 刻度 线 会 把 输入 值 域 切 分 成 不 够 恰当 的 
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值 (也 就 是 0、150、300、450 和 600) 。D3 只 将 ticks() 的 值 作为 一 个 建议 ， 如 
果 它 发 现 有 更 清晰 更 方便 理解 的 值 (比如 以 100 为 间隔 ) ， 哪 怕 比 你 设置 的 值 多 一 点 
或 少 一 点 ， 它 也 会 采用 。 实 际 上 ， 这 是 一 个 非常 出 彩 的 功能 ， 可 以 确保 设计 的 可 伸 
缩 性 。 随 着 数据 集 的 变化 ， 输 入 值 域 的 扩大 或 缩小 (数值 变 得 更 大 或 更 小 )，D3 都 
可 以 保证 刻度 标签 的 数量 合适 而 且 易 读 。 
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图 8-5: 刻度 线 变 少 了 


8.5 ”垂直 数 轴 
接 下 来 该 考虑 一 下 垂直 方向 的 数 轴 了 ! 通过 复制 修改 为 xAxis 而 写 的 代码 ， 可 以 在 
代码 的 顶部 添加 如 下 儿 行 : 

// 定义 y 轴 

Var yAxis = d3.svg.axis() 


.Scale(yScale) 
.orient ("left") 




















.ticks(5); 
而 在 代码 底部 添加 如 下 儿 行 : 
// 创建 y 轴 
svg.append("g") 
‘attr("class"™, ‘axis") 
.attr("transform", "translate(" + padding + ",0)") 
.Call (yAxis); 


看 看 图 8-6，y 轴 的 标签 左 对 齐 ， 而 yAxis 的 分 组 g 向 右 平移 了 预先 设 定 的 边 距 。 


现在 看 起 来 像 是 个 真正 的 图 表 了 ! 但 yaxis 的 标签 被 切 掉 了 一 些 。 为 了 增 大 标签 左 
侧 的 空间 ， 我 们 把 边 距 的 值 由 20 加 到 30: 


var padding = 30; 























图 8-6: 初始 状态 下 的 y 轴 


当然 ， 对 于 不 同 的 数 轴 也 可 以 分 别 声明 不 同 的 边 距 ， 比 如 可 以 分 别 命名 为 xPadding 
和 ypPadding。 这 样 就 能 更 细致 地 控制 布局 了 。 


更 新 后 的 代码 参见 04_axes_y.html， 而 结果 如 图 8-7 所 示 。 

















图 8-7: 添加 y 轴 后 的 散 点 图 


8.6 最 后 的 润色 


非常 感谢 各 位 到 目前 为 止 保持 克制 和 礼貌 ， 一 点 都 没有 嫌 烦 。 当 然 ， 我 也 一 直 在 努 
力 不 让 你 讨厌 。 接 下 来 ， 为 了 证 明 新 坐标 轴 是 动态 可 伸缩 的 ， 我 们 把 静态 的 数据 集 
改 成 随机 生成 的 : 


// 动态 的 随机 生成 的 数据 集 
var dataset = []; 
Var numDataPoints = 50; 
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Var xRange = Math.random() * 1000; 
Var yRange = Math.random() * 1000; 


for (var i = 0; i < numDataPoints; i++) { 
Var newNumberl1 = Math.floor (Math.random() * xRange); 
Var newNumber2 = Math.floor (Math.random() * yRange); 


dataset.push( [newNumber1, newNumber2]); 


} 


这 里 首先 初始 化 了 一 个 空 数组 ， 然 后 循环 50 次 ， 每 次 选择 两 个 随机 数值 ， 添 加 
(push () ) 到 数据 集 的 数组 中 。 结 果 如 图 8-8 所 示 。 
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8-8: 根据 随机 数据 生成 的 散 点 图 


试 试 使 用 随机 数据 的 示例 05_axes_random.html。 每 次 刷新 页 面 ， 都 会 生成 不 同 的 数据 
集 。 注意 ， 数 轴 会 随 着 输入 值 域 的 变化 而 相应 地 缩放 ， 而 刻度 和 标签 也 会 相应 地 变化 。 


讲 完 了 数 轴 ， 我 们 该 把 那些 讨厌 的 红色 标签 去 掉 了 。 很 简单 ， 只 要 把 相应 的 代码 注 
释 掉 即 可 。 


最 终结 果 如 图 8-9 所 示 ， 而 完成 的 散 点 图 代码 则 在 06_axes_no_labels.html 中 。 



































图 8-9: 根据 随机 数据 生成 的 散 点 图 ， 去 掉 了 红色 标签 
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8.7 为 刻度 标签 定义 样式 


迄今 为 止 ， 我 们 的 数据 集中 都 是 整数 ， 这 当然 是 最 简单 的 情况 。 但 实际 应 用 中 的 数 
据 可 没有 那么 简单 ， 到 时 候 你 就 会 想 要 对 数 轴 标 签 进行 更 多 控制 ， 包 括 数字 的 格式 。 
好 了 ， 使 用 tickFormat () 就 可 以 为 数值 应 用 不 同 的 格式 。 比 如 ， 让 数值 保留 小 数 
点 后 三 位 数字 ， 或 者 显示 为 百分比 值 ， 或 者 同时 应 用 这 两 种 格式 。 


要 使 用 tickFormat () ， 首 先 要 定义 一 个 新 的 数值 格式 国 数 。 通 过 这 个 国 数 可 以 告 
诉 D3 把 数值 当成 百分比 ， 同 时 保留 一 位 小 数 ， 等 等 。 这 样 ， 交 给 它 数值 0.23， 它 
就 会 返回 字符 串 "23 .0s"。( 关 于 da .format () 的 更 多 设置 ， 请 参考 这 里 : https:// 
github.com/mbostock/d3/wiki/Formatting#wiki-d3_format。 ) 











Var formatAsPercentage = d3.format (".1%$"); 


然后 ， 让 数 轴 对 其 刻度 使 用 刚刚 定义 的 格式 化 函数 ， 比 如 : 


XxAxis.tickFormat (formatAsPercentage); 











要 测试 这 几 个 函数 ， 其 实 最 简单 的 办 法 就 是 使 用 控制 台 。 比 如 ， 随 便 打 开 
一 个 加 载 D3 的 页 面 ， 比 如 06_axes_no_labels.html1， 在 控制 台 里 直接 输入 
格式 化 规则 ， 然 后 给 它 一 个 值 ， 就 像 你 给 任何 国 数 传递 参数 一 样 。 





























在 图 8-10 中 可 以 看 到 ， 输 入 的 数值 0.54321 被 转换 成 了 适合 显示 的 54.3% 
完美 ! 














> var formatAsPercentage = d3.format(".1%"); 
undefined 

> formatAsPercentage(0.54321) 
"54. 3%" 

> 











8-10: 在 控制 台中 测试 format () 函数 


试 试 07_axes_format.html 吧 。 很 显然 ， 百 分 比 格式 并 不 适合 当前 数据 集 之 下 的 散 点 
图 。 但 这 只 不 过 是 一 次 练习 嘛 ， 你 可 以 尝试 生成 非 整 数 的 随机 数 ， 或 者 直接 拿 格 式 
化 函数 试验 一 下 。 














目前 为 止 ， 我 们 只 使 用 了 静态 的 数据 集 。 但 现实 中 的 数据 总 是 在 随 着 时 间 变 化 ， 
我 们 很 可 能 需要 及 时 将 这 些 变化 反映 到 图 表 中 。 


而 过 湾 则 利用 了 动画 这 个 视觉 利器 。 


本 书 的 例子 将 首先 根据 一 个 数据 集 来 生成 图 表 ， 然 后 再 彻底 改变 数据 。 


9.1 更 新 条 形 图 


先 来 看 看 我 们 的 老 朋 友 ， 图 9-1 所 示 的 条 形 图 。 


而 


用 D3 的 话 来 说 ， 这 些 变 化 要 通过 更 新 来 处 理 。 视 觉 上 的 调整 以 过 渡 的 形式 展现 ， 
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图 9-1: 条 形 图 ， 老 朋友 了 
看 一 看 01_bar_chart.html 中 的 代码 ， 就 会 发 现 这 张 图 用 的 是 静态 数据 集 : 


Var dataset =s |[ 5; 10, 13, 19,; 21, 25,; 22,; 18, 15, 13, 
TE 2 B20 L876 .L823 25. J 








在 此 基础 上 ， 我 们 又 学 习 了 如 何 编写 更 灵活 的 代码 ， 让 图 表 元 素 能 够 自动 调整 以 适 
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应 不 同 规模 的 数据 集 (或 长 或 短 的 数组 )， 以 及 不 同 的 数据 值 (或 小 或 大 的 数值 ) 。 
D3 的 比例 尺 让 我 们 实现 了 这 种 灵活 控制 ， 因 此 接 下 来 我 们 把 这 个 条 形 图 也 更 新 一 
得， 让 它 跟 上 时 代 。 

准备 好 图 ? 好， 稍 等 一 会 …… 咽 …… 完 了 ! 让 您 久 等 了 。 


图 9-2 看 起 来 虽然 类 似 ， 但 内 部 已 经 有 了 很 大 的 变化 。 不 信 可 以 打开 02_bar_chart_ 
with_scales.html 看 看 。 
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图 9-2: 焕然 一 新 的 可 伸缩 的 灵活 的 条 形 图 
一 上 来 ， 我 们 先 调 整 了 宽度 和 高 度 ， 让 条 形 图 更 高 一 些 也 更 宽 一 些 : 











Var w = 600; 
var hi 二 2507 


接 下 来 定义 了 一 个 序数 比例 尺 ， 用 于 处 理 条 形 左 / 右 定 位 和 x 轴 的 标签 : 


var xScale = d3.scale.ordinal () 
.domain(d3.range (dataset .length)) 
.rangeRoundBands ([0, w], 0.05); 


看 起 来 可 不 好 理解 啊 ， 没 关系 ， 我 们 一 行 一 行 解释 。 


9.1.1 序数 比例 尺 
首先 ， 第 一 行 : 
Var xScale = d3.scale.ordinal () 


声明 了 一 个 变量 xscale， 跟 散 点 图 示例 中 一 样 。 只 不 过 这 里 是 序数 比例 尺 ， 而 不 
是 线性 比例 尺 。 什 么 是 序数 比例 尺 ? 就 是 用 于 处 理 序数 的 咏 。 那 什么 是 序数 呢 ? 序 
数 就 是 有 固定 顺序 的 一 些 类 别 ， 比 如 : 
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。 新 生 、 大 二 、 大 三 、 毕 业 班 
。B 等 A 等、AA 等 
。 非常 不 喜欢 、 不 喜欢 、 没 感觉 、 喜 欢 、 非 常 喜欢 


当然 ， 这 个 条 形 图 使 用 的 也 不 是 真正 的 序数 数据 集 ， 而 只 是 从 左 到 右 地 原样 表现 了 
相应 值 在 数据 集中 的 顺序 。D3 的 序数 比例 尺 对 这 种 情况 也 适用 ， 因 为 它 有 很 多 可 见 
的 元 素 〈 坚 条 ) ， 以 一 定 的 顺序 展示 〈 从 左 到 右 ) ， 而 且 均 匀 分 布 。 这 一 点 稍 后 你 就 
会 明白 。 








.domain(d3.range (dataset .length)) 


第 二 行 代码 为 比例 尺 设 定 了 输入 值 的 值 域 。 还 记得 吗 ， 对 线性 比例 尺 可 是 要 用 包含 
两 个 值 的 数组 来 设置 值 域 的 ， 比 如 [0， 100] 。 而 且 在 线性 比例 尺 中 ， 这 个 数组 包 
含 的 必须 是 值 域 的 最 小 值 和 最 大 值 。 而 序数 的 值 域 呢 ， 就 是 序数 ， 不 是 线性 或 定量 
数据 。 因 此 设置 序数 比例 尺 的 值 域 ,通常 是 要 指定 一 个 包含 类 别名 称 的 数组 ， 比 如 : 


.domain( [" 新 生 m,n 大 三 mn 大 三 Tn 毕业 班 "] ) 


我 们 的 条 形 图 没有 明确 的 类 别 ， 但 可 以 给 每 个 数据 点 或 条 形 分 配 一 个 对 应 其 在 数据 
集中 位 置 的 ID 值 ， 比 如 0.、1、2、3， 等 等 。 因 此 ， 相 应 的 值 域 可 以 这 样 设置 : 











本 
L100. TL. 12 13, 14, 于 57 16,. 17, 8 191]) 


不 过 ， 在 此 我 们 可 以 使 用 一 个 更 好 的 生成 连续 数值 数组 的 方法 : qd3 .range ()。 
在 查看 02_bar_chart_with_scales.html 的 时 候 ， 打 开 控 制 台 ， 输 入 以 下 代码 : 





dq3 .zange (10) 


应 该 可 以 看 到 它 输 出 了 如 下 数组 : 


这 多 好 啊 。D3 又 给 我 们 省 时 间 了 (也 省 掉 了 使 用 for () 循环 的 麻烦 )。 
回 到 我 们 的 代码 中 ， 现 在 该 明白 这 行 代码 的 含义 了 吧 : 
.domain(d3.range (dataset .length)) 


1. 这 里 的 dataset .length 等 于 20， 因 为 数据 集 里 一 共有 20 个 值 ; 

2. 那 当 然 就 会 调用 dq3 .range(20) ， 调 用 结果 就 是 返回 这 个 数组 : [0，1，2，3， 
4 6 7 Br 9 LO Tl; 本 25 13 Ld, 了 工 5 L617 Le 了 工 3 

3. 最 后 ，domain() 把 新 序数 比例 尺 的 值 域 设 置 为 这 些 值 。 
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比较 容易 让 人 迷惑 的 地 方 在 哪儿 呢 ? 因为 序数 通常 是 非 数值 的 ， 而 我 们 这 里 使 用 的 
却 是 数值 (0、1、2…… es 


9.1.2 自动 分 档 

d3.scale.ordinal () 有 一 个 优势 ， 它 支持 范围 分 档 (banding)。 与 定量 比例 尺 
(如 da.scale.linear()) 返回 连续 的 范围 值 不 同 ， 序 数 比 例 尺 使 用 的 是 离散 范围 
值 ， 也 就 是 输出 值 是 事先 就 确定 好 的 ， 可 以 是 数值 ， 也 可 以 不 是 。 


映射 范围 时 ， 可 以 使 用 range () ， 也 可 以 使 用 rangeBands () 。 后 者 接收 一 个 最 小 
值 和 一 个 最 大 值 ， 然后 根据 输入 值 域 的 长 度 自动 将 其 切 分 成 相等 的 块 或 ， “ 档 ”， 例 如 : 





.rangeBands ([0, w]) 


这 行 代码 的 意思 是 “计算 从 0 到 w 可 以 均 分 为 儿 档 ， 然 后 把 比例 尺 的 范围 设 定 为 这 
些 档 ” 。 就 我 们 的 例子 而 言 ， 值 域 有 20 个 值 ， 因 此 D3 会 执行 如 下 计算 : 





(w - 0) / xScale.domain() .length 
(600 - 0) / 20 

600 / 20 

30 


最 后 ， 每 一 档 的 “宽度 ”为 30。 


可 以 给 rangeBands () 传 入 第 二 个 参数 ， 指 定 档 间距 。 在 此 ， 我 们 使 用 的 是 0.2， 
也 就 是 档 间 距 为 每 一 档 宽度 的 20% : 





.rangeBands ([0, w], 0.2) 


要 想得到 整数 值 ， 可 以 使 用 rangeRoundBands () ， 它 与 rangeBands () 的 区 别 只 
是 输出 的 值 会 舍 入 为 最 接近 的 整数 。 因 此 ， 举 个 例子 ，12.3456 就 会 变 成 12。 整 数 
值 有 助 于 将 视觉 元 素 与 像素 网 格 对 齐 ， 保 证 图 形 的 边缘 清晰 锐利 。 


同时 ， 我 们 还 把 条 形 间距 减少 到 5%， 因 此 那 行 代码 最 后 应 该 如 下 所 示 : 


.rangeRoundBands ([0, w], 0.05); 


这 样 可 以 保证 表示 条 形 宽 度 的 像素 值 恰 如 其 分 ， 而 且 条 形 间 还 会 有 很 小 的 间距 。 





9.1.3 ”使 用 序数 比例 尺 


在 前 面 的 代码 中 (建议 大 家 看 一 看 源 代码 )， 创 建 rect 元 素 的 时 候 还 设 定 了 图 表 水 
平 的 x 轴 坐 标 : 











// 创建 条 形 
svg.selectAll ("rect") 
.data (dataset) 
.enter () 
.append ("rect") 
“attri("x", function(d, 1) { 
return xScale (i); // <-- 设 定 x 坐标 





}) 


这 里 请 注意 ， 因 为 匿名 函数 的 参数 是 a 和 i， 所 以 D3 会 自动 传 入 正确 的 值 。 当 然 ， 
d 还 是 当前 的 数据 值 ， 而 i 是 它 的 索引 值 。 也 就 是 说 ，i 在 每 次 循环 中 分 别 会 接收 
到 0、1、2、3.…… 

多 巧 啊 ! 设置 比例 尺 值 域 的 时 候 ， 我 们 使 用 的 也 是 同样 的 值 (0、1、2、3……)。 因 


此 ， 在 调用 xscale(i) 时 ，xscale() 会 找到 序数 值 IT， 然后 返回 对 应 的 输出 〈 档 
位 ) 值 。( 你 可 以 自己 在 控制 台中 验证 一 下 ， 和 输入 xscale(0) 或 xscale(5) 试 试 。) 








更 方便 的 是 设置 条 形 的 宽度 变 得 很 容易 。 在 使 用 序数 比例 尺 之 前 ， 我 们 必须 这 样 : 








.attr("width", w / dataset.length - barPadding) 


为 rangeRoundBands () 已 经 内 置 了 间距 ， 现 在 连 parPadding 也 用 不 着 了 。 设 
置 每 个 条 形 的 宽度 ， 可 以 直接 使 用 以 下 代码 : 


.attr("width", xScale.rangeBand ()) 


D3 帮 我 们 做 算术 的 感觉 怎么 样 ? 





9.1.4 其 他 更 新 


在 02_bar_chart_with_scales.html 里 ， 我 还 更 新 了 其 他 一 些 地 方 ， 包 括 创建 了 新 的 线 
性 比例 尺 yscale ， 以 计算 垂直 方向 的 值 。 关 于 线性 比例 尺 ， 你 已 经 知道 怎么 用 了 ， 
自己 看 代码 时 只 要 关注 怎么 设置 条 形 的 高 度 就 好 了 。 


9.2 更 新 数据 

好 ， 如 图 9-3 所 示 ， 我 们 现在 有 了 令 人 惊叹 的 条 形 图 ， 它 足够 灵活 ， 能 够 处 理 任何 
数据 。 

什么 ,你 说 真 的 ?让 我 们 看 看 。 

最 简单 的 数据 变更 的 情况 是 所 有 值 都 不 一 样 了 ， 但 值 的 数量 没有 变 。 
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图 9-3: 新 条 形 图 
在 这 种 情况 下 ， 可 以 这 样 做 : 


1. 修改 数据 集 的 值 ， 
2. 把 新 值 重新 绑 定 到 已 有 元 素 (这 样 才能 重 写 原来 的 值 ) ， 
3. 按 需 设置 新 属性 值 ， 以 更 新 可 见 的 元 素 。 


不 过 ， 在 实践 这 几 个 步骤 之 前 ， 需 要 触发 基 个 事件 。 到 目前 为 止 ， 我 们 的 代码 都 是 
随 着 页 面 加 载 执行 。 对 于 更 新 数据 来 说 ， 可 以 在 开始 的 绘制 代码 一 执行 完毕 就 更 新 ， 
但 这 样 更 新 就 不 为 人 知 了 ， 因 为 速度 太 快 。 为 了 能 看 到 更 新 的 变化 ， 我 们 要 把 更 新 
的 代码 与 其 他 代码 分 开 。 因 此 ， 需 要 在 页 面 加 载 之 后 有 一 个 “触发 器 ”， 以 触发 数据 
和 图 表 的 更 新 。 鼠 标点 击 怎么 样 ? 











9.2.1 通过 事件 监听 器 实现 交互 
要 响应 鼠标 点 击 ， 任 何 DOM 元 素 都 可 以 胜任 。 这 次 就 不 用 按钮 了 ， 直 接 在 HTML 
的 主体 中 添加 一 个 p 标签 就 好 : 





<p>Click on this text to update the chart with new data values (once) .</P> 
然后 在 D3 代码 的 最 后 ， 添 加 如 下 儿 行 : 
d3.select ("p") 


.on("click", function() { 


// 被 单 击 时 执行 任务 








和 


这 样 就 选中 了 新 创建 的 p 元 素 ， 然 后 为 它 添 加 了 一 个 事件 监听 器 。 什 么 是 事件 监听 
颖 啊 ? 





134 | 第 9 章 





在 JavaScript 中 ， 事 件 随 时 都 在 发 生 。 这 里 所 说 的 事件 ， 可 不 是 连篇 累 肤 的 新 闻 报 
道 ， 而 是 mouseover 和 click。 大 多 数 情况 下 ， 这 些 至 关 重 要 的 事件 都 会 被 忽略 
有 对 吧 ? )。 可 如 果 有 人 监听 ， 那 就 可 以 听 到 这 些 事件 ， 

能 够 把 它 传 给 自己 的 子孙 后 代 ， 好 啦 ， 至 少 可 以 触发 某 种 DOM 交互 。( 关 于 这 
， 有 一 桩 经 典 的 JavaScript 公案 : 如 果 有 事件 发 生 ， 而 没有 监听 器 听 到 ， 那 它 
到 底 发 生 过 没有 ? ) 


什么 是 事件 监听 器 呢 ， 其 实 也 是 匿名 函数 ， 可 以 监听 (一 或 多 个 ) 特定 元 素 上 发 生 
的 事件 。D3 的 selection.on() 方法 是 添加 事件 监 昕 器 的 简便 方法 ， 它 接受 两 个 
参数 : 事件 类 型 ("click") 和 监听 器 (匿名 函数 )。 


ee p 元 素 上 发 生 的 单 击 事件 。 在 该 事件 发 生 时 ， 就 会 执 
行 监听 函数。 而 在 匿名 监听 国 数 的 花 括 号 内 ， 可 以 编写 任何 需要 的 代码 : 























dq3 .Select ("p") 
on("click", function() { 
// 响应 单 击 
alert ("Hey, don't click that!"),; 





9.2.2 ”改变 数据 
事实 上 ， 我 们 不 想 弹出 那个 令 人 讨厌 的 窗口 ， 而 是 想 在 监听 器 中 更 新 数据 集 ， 覆 盖 
原始 的 数值 。 这 是 一 开始 我 们 说 的 第 1 步 : 


dataset 二 [, 11 12, 了 57 20 工 8 17, L618; 23, 25. 
5 TO. La Lo DL QB D2 LT8. To TL3 | 


第 2 步 是 重新 绑 定 新 值 与 已 有 元 素 。 为 此 ， 需 要 选择 相应 的 矩形 ， 再 调用 一 次 
data() 方法 : 


svg.selectAll ("rect") 


.data (dataset); // 长 官 ， 新 数据 绑 定 成 功 ! 





9.2.3 更 新 视觉 元 素 

最 后 ， 第 3 步 是 更 新 视觉 元 素 的 属性 ， 以 反映 (刚刚 更 新 的 ) 数据 值 。 这 一 步 超 简 
单 ， 因 为 只 把 原来 写 过 的 代码 复制 粘贴 过 来 就 行 了 。 此 时 此 刻 ， 所 有 和 矩形 的 水 平 位 
置 和 宽度 都 不 变 ， 需要 更 新 的 只 有 它们 的 高 度 和 y 坐标 值 ， 所 以 我 们 需要 以 下 代码 : 





svg.selectAll ("rect") 
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.data (dataset) 

.attr("y", function(d) { 
return h - ysScale(d)，; 

}) 


.attr("height", function(d) { 
return yScale (d) 
过 
看 到 了 吧 ， 除 了 没有 enter() 和 append() ， 所 有 代码 跟 最 初生 成 矩形 的 代码 完全 
一 样 。 


把 这 三 步 的 所 有 代码 放 到 一 起 ， 就 是 更 新 所 需 的 代码 : 


// 单 击 的 时 候 ， 更 新 数据 
d3. Beleect (un") 
.on("click", function() { 





// 新 数据 集 

dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 
5 LO0; L319, D1,-25, D2, L808, L135, L838 |]: 

// 更 新 所 有 算 形 


svg.selectAll ("rect") 
.data (dataset) 
.attr("y", function(d) { 
return h - yScale(d); 
}) 
.attr("height", function(d) { 
return ysScale(d); 


}ys 
}); 


看 看 03_updates_all_data.html 吧 ， 开 始 状 态 如 图 9-4 所 示 。 





Click on this text to Update the chart With new data Values (once). 





25 25 
22 
21 
18 18 18 
17 
16 
15 15 
13 13 
12 


图 9-4: 可 更 新 的 条 形 图 
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然后 单 击 段落 中 的 任何 地 方 ， 图 表 就 会 变 成 图 9-5 所 示 。 





Click on this text to Update the chart with new data values (once). 





18 
17 
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15 
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图 9-5: 更 新 数据 后 的 条 形 图 


好 消息 : 数据 集中 的 值 全 都 改变 、 重 新 绑 定 并 反映 在 矩形 上 面 了 。 坏 消息 : 
看 起 来 令 人 菲 夷 所 思 ， 我 们 忘 了 更 新 标签 ， 还 有 条 形 的 颜色 了 。 还 有 一 个 好 消息 
(我 总 喜欢 把 最 好 的 消息 放 在 最 后 公布 ) : 这 个 问题 容易 改 。 


为 了 保证 颜色 也 同步 更 新 ， 只 要 把 原来 针对 £11 编写 的 代码 复制 过 来 就 行 : 


svg.selectAll ("rect") 

.data (dataset) 

attr("y", function(d) { 
return h - yScale(d) ; 

}) 

.attr("height", function(d) { 
return ysScale(d); 

}) 

.attr ("fill", function(gd) { // <-- 在 这 儿 呢 ! 
return "rgb(0; 0; "(QQ 10) 各 ") 


}); 


条 形 图 





接 下 来 更 新 标签 ， 方 法 类 似 ， 只 是 这 里 要 调整 一 下 它们 的 文本 内 容 和 x、y 坐标 值 : 


svg.selectAll ("text") 
.data (dataset) 
.text (function(d) { 
return 4d; 
}) 
.attr("x", function(d, i) { 
return xScale(i) + xScale.rangeBand() / 2; 
}) 
.attr("y", function(d) { 
return h - yScale(d) + 14; 


}); 
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好 啦 ， 打 开 04_updates_all_data_fixed.html 再 看 看 吧 。 你 会 发 现 一 开始 跟 最 初 一 样 ， 
不 过 单 击 段落 之 后 ， 就 能 看 到 正确 更 新 后 的 条 形 颜色 和 标签 了 ， 如 图 9-6 所 示 。 





Click on this text to Update the chart with new data Values (once). 





25 25 
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21 
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图 9-6: 更 新 了 条 形 图 的 颜色 和 标签 


9.3 过渡 动画 
人 生 从 一 种 境遇 到 另 一 种 境遇 的 过 渡 可 谓 惊 险 ， 第 一 天 上 学 ， 搬 到 新 城市 ， 辞 掉 全 
职工 作 去 干 自由 数据 可 视 化 。 但 D3 的 过 渡 却 好 玩 、 惊 艳 ， 而 且 没 有 任何 精神 负担 。 


要 创建 一 个 精致 、 流 畅 、 动 态 的 过 渡 效 果 ， 只 需 简单 的 一 行 代码 : 











: 旋 aNiELONL() 


特别 要 注意 的 是 ， 在 方法 链 上 ， 要 把 这 个 调用 播 到 选择 元 素 之 后 ， 改 变 任何 属性 
之 前 : 
// 更 新 所 有 和 矩形 


svg.selectAll ("rect") 
.data (dataset) 
.transition() // <-- 这 是 新 代码 ， 其 他 都 保持 不 变 。 
.attr("y", function(d) { 
return h - yScale(d); 
}) 
.attr("height", function(d) { 
return ysScale(d); 





}) 
:ttE("flL", functionm(d) { 
returnm "rgb(0,, OO, (dQ 0) 
}); 
大 大 


好 啦 ， 现 在 打开 05_transition.html， 然 后 点 击 段落 看 看 过 渡 动 画 是 什么 效果 吧 。 更 
新 后 的 最 终 效果 相同 ， 但 从 初始 状态 到 最 终 状 态 的 过 渡 则 自然 、 顺 畅 多 了 。 





是 不 是 大 疯 狂 了 ? 我 不 是 心理 学 家 ， 可 一 行 代码 就 能 让 D3 帮 我 们 实现 动画 过 渡 ， 
简直 太 疯 狂 了 。 


没有 transition()，D3 会 对 所 有 attr() 语句 立即 求 值 ， 因 此 高 度 和 填充 的 变化 
并 刻 会 发 生 。 添 加 了 transition() 之 后 ，D3 会 考虑 时 间 的 因素 。 这 一 次 ， 它 不 
再 一 次 性 应 用 所 有 新 值 ， 而 是 会 在 旧 值 与 新 值 之 间 插 入 一 系列 过 渡 值 ， 也 就 是 要 对 
起 始 和 终止 值 进 行 归 一 化 处 理 ， 然 后 计算 两 者 之 间 的 中 间 状 态 。D3 还 能 分 辨 不 同 
属性 值 的 格式 ， 对 这 些 格 式 的 变化 进行 插值 。 比 如 ， 高 度 从 200px 开始 过 渡 到 100 
(没有 px)， 或 者 把 蓝 色 填充 变 成 rgb (0,255,0) (绿色 )。 整 个 过 程 不 需要 你 参与 ， 
D3 就 检 你 做 好 了 。 


你 还 不 相信 我 ? 不 过 ， 这 确实 有 点 疯狂 。 当 然 ， 也 超级 好 用 。 














9.3.1 持续 时 间 

对 ，D3 会 随 着 时 间 推 移 不 断 插 入 attr() 值 ， 但 持续 多 长 时 间 呢 ? 默认 是 250 毫 
秒 ， 或 四 分 之 一 秒 (1 秒 等 于 1000 上 毫秒 )。 这 就 是 05_transition.html 中 的 动画 那么 
快 的 原因 。 

好 在 ， 我 们 可 以 控制 动画 的 持续 时 间 。 而 且 ， 只 要 添加 一 行 代码 (这 次 同样 不 是 开 
玩笑 ) : 





.duration(1000) 


注意 ， 必 须 把 auration() 放 到 transition() 之 后 ， 参 数 的 单位 是 毫秒 ， 因 此 
duration (1000) 就 是 持续 1 秒 。 


下 面 把 这 行 代码 放 到 页 面 中 : 


// 更 新 所 有 和 拢 形 
svg.selectAll ("rect") 
.data (dataset) 
.transition() 
.duration(1000) // <-- 这 是 新 代码 ! 
.attr("y", function(d) { 
return h - yScale(d); 
}) 
.attr("height", function(d) { 
return ysScale(d); 
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局 
.attr ("fill", function(d) { 
return "rgb(0, 0, "+ (d * 10) + ")"; 
}ys 
打开 06_duration.html 看 看 有 什么 不 一 样 。 复 制 这 个 文件 ， 然 后 把 持续 时 间 改 成 其 
他 值 ， 观 察 不 同 的 效果 。 比 如 ， 改 成 3000 (3 秒 ) 或 100 (十 分 之 一 秒 )。 


实际 的 持续 时 间 取 决 于 图 表 的 类 型 ， 以 及 触发 过 渡 的 方式 。 根 据 经 验 ， 细 微 的 界面 
反馈 〈 比 如 鼠标 基 停 在 元 素 上 触发 过 渡 ) ， 过 渡 时 间 大 约 150 毫秒 比较 合适 ， 而 更 显 
著 的 视觉 过 渡 〈 比 如 整个 数据 视图 的 变化 ) 持续 1000 毫秒 比较 理想 。1000 毫秒 (1 
秒 ) 不 算 长 ， 也 不 算 短 。 


如 果 你 自己 懒得 动手 试验 ， 可 以 直接 打开 07_duration_slow.html， 我 在 其 中 设 定 了 
5000 这 个 值 ， 让 过 度 动 画 持续 5 秒 。 








在 这 个 慢 镜头 之 下 ， 可 以 看 到 值 标签 并 没有 像 条 形 高 度 那么 平 清 地 过 渡 。 要 校正 这 
个 问题 ， 也 只 需 两 行 代码 ， 这 次 新 代码 要 插入 到 更 新 标签 的 代码 段 中 : 


// 更 新 标签 
svg.selectAll ("text") 
.data (dataset) 
:transition'() // <-- 这 是 新 代码 
.duration(5000) // 这 也 是 新 代码 
.text (function(d) { 
return dd; 





}) 
.attr("x", function(d, i) { 
return xScale(i) + xScale.rangeBand() / 2; 


}) 
‘attr("y", function(d) { 
return h - yScale(d) + 14; 
}) ; 
好 多 啦 ! 看 看 08_duration_slow_labels_fixed.html 吧 ， 现 在 标签 和 条 形 的 变化 已 经 
很 协调 了 。 


9.3.2 ” 缓 动 函数 

5000 毫秒 ， 慢 得 像 糖 稀 一 样 的 过 渡 ， 让 我 们 感受 到 了 整个 动画 的 品质 。 注 意 到 没 ， 
动画 一 开始 非常 慢 ， 然 后 逐渐 加 速 ， 最 后 在 达到 预定 高 度 之 前 速度 再 次 慢 了 下 来 。 
换 名 话说， 动画 的 速度 不 是 线性 不 变 的 ， 而 是 有 加 减速 变化 的 。 

应 用 于 过 渡 效 果 的 这 种 动画 品质 叫做 绥 动 。 用 动画 术语 来 说 ， 可 以 理解 成 元 素 缓 缓 
就 位 ， 然 后 从 一 个 位 置 不 间断 地 移动 到 另 一 个 位 置 。 
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在 D3 中 ， 可 以 使 用 ease () 指定 不 同 的 缓 动 类 型 。 默 认 的 缓 动 效果 是 "cubic-in- 
out"， 产 生 的 就 是 我 们 刚刚 看 到 的 那 种 逐渐 加 速 然 后 再 逐渐 减速 的 效果 。 这 种 默认 
效果 适合 大 多 数 平滑 过 渡 。 


对 比 一 下 09_ease_linear.html， 这 个 页 面 使 用 了 ease ("linear") 指定 了 线性 缓 动 
半数。 线性 缓 动 就 是 没有 逐渐 加 速 和 减速 的 变化 ， 所 有 元 素 都 按照 一 个 速度 变化 ， 
变化 到 最 终 值 时 夏 然而 止 。( 这 个 页 面 中 动画 的 持续 时 间 是 2000 毫秒 。) 


同样 ， 也 要 在 transition() 之 后 、attr() 之 前 指定 ease()。 事 实 上 ，ease () 
在 duration() 之 前 之 后 都 没 问题 ， ee 


// 选择 元 素 的 代码 
.transition() 
.duration(2000) 

.ease ("linear") 


//attr() 的 代码 


除 此 之 外 ， 还 有 很 多 缓 动 函数 可 供 选 择 。 以 下 是 几 个 我 比较 喜欢 的 。 





。 circle 


逐渐 进入 并 加 速 ， 然 后 突然 停止 。 


。 elastic 


描述 这 个 效果 的 一 个 最 恰当 的 词 是 “有 弹性 ” 


。 bounce 


像 皮 球 落地 一 样 反 复 弹跳 ， 慢 慢 停 下 来 。 


这 几 种 缓 动 的 效果 可 以 参见 10_ease_circle.html、11_ease_elastic.html 和 12_ease_ 
bounce.html。 要 了 解 D3 支持 的 所 有 缓 动 效果 ， 可 以 参考 它 的 维基 : https://github. 


com/mbostock/d3/wiki/Transitions#wiki-d3_ease。 


哇 噢 ， 我 有 点 后 悔 告诉 你 弹跳 的 pounce 了 。 请 一 定 在 想 通 过 信息 图 来 体现 讽刺 和 
挖 苗 的 意思 时 使 用 pounce (比如 时 笑 别人 的 信 息 图 做 得 有 多 差劲 )。 从 直觉 上 说 ， 
我 还 没 发 现 什 么 可 视 化 图 表 适 合 使 用 弹跳 动画 。cubic-in-out 作为 默认 效果 是 有 
道理 的 。 








9.3.3 延迟 时 间 
与 ease() 控制 动画 品质 不 同 ，delay () 用 于 指定 过 渡 什 么 时 间 开 始 。 


可 以 给 delay () 传人 一 个 静态 的 值 ， 同 样 以 毫秒 为 单位 ， 比 如 : 
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transition!() 
.delay (1000) //1000 上 毫秒， 即 1 秒 
.duration(2000) //2000 毫秒 ， 即 2 秒 


与 使 用 duration() 和 ease() 一 样 ， 把 aelay() 放 到 哪里 并 没有 十 分 严格 的 限 
制 ， 但 我 更 喜欢 把 它 放 在 auration () 前 面 。 因 为 是 先 设 定 延 迟 时 间 ， 然 后 过 渡 动 
画 才 开始 计时 嘛 ， 这 符合 逻辑 。 


参见 13_delay_static.html， 打 开 后 单 击 文本 会 触发 1000 毫秒 的 延迟 (1 秒 内 什么 也 
“会 变化 )， 然 后 才 是 2000 毫秒 的 过 渡 动 画 。 


静态 延迟 时 间 只 是 一 种 延迟 方式 ， 更 有 意思 的 是 可 以 动态 计算 延迟 时 间 。 动 态 延迟 
的 一 个 常见 用 途 就 是 创建 交错 延迟 的 效果 ， 让 某 些 过 渡 在 另 一 个 过 渡 之 前 发 生 。 交 
错 延迟 对 人 的 感知 有 利 ， 因 为 当 相 邻 元 素 的 变化 不 那么 同步 时 ， 人 上 腿 更 容易 注意 到 
每 个 元 素 的 变化 。 要 设置 动态 延迟 ， 就 别 给 delay () 传递 静态 值 ， 而 是 给 它 传 和 人 一 
个 函数 ， 按 照 D3 的 惯例 …… 对 ， 就 是 传人 一 个 匿名 函数 : 








.transition () 
.delay (function(d, i) { 
return i * 100; 


}) 


.duration(500) 


在 芽 名 国 数 中 ， 与 当前 元 素 绑 定 的 数据 值 是 以 a 传人 的 ， 而 这 个 元 素 的 位 置 是 以 工 
传 和 的。 因此， 这 里 的 意思 是 让 D3 循环 遍历 每 个 元 素 ， 把 它们 的 动画 延迟 时 间 设 
定 为 i * 100， 也 就 是 后 一 个 元 素 的 动画 开始 时 间 总 比 前 一 个 元 素 晚 100 毫秒 。 





总 之 ， 这 样 就 能 得 到 一 个 交错 过 渡 的 动画 。 还 是 打开 14_delay_dynamic.html 亲自 体 
验 一 下 吧 。 


注意 ， 我 把 持续 时 间 缩 短 到 了 500 毫秒 ， 以 便 让 整体 动画 效果 显得 更 紧凑 。 而 且 ， 
此 时 的 auration () 设 定 的 是 每 个 元 素 的 动画 持续 时 间 ， 不 是 整体 动画 累计 的 持续 
时 间 。 对 这 个 例子 来 说 ，20 个 元 素 的 持续 时 间 都 是 500 毫秒 ， 假 如 没有 延迟 ， 那 所 
有 元 素 都 会 用 500 毫秒 ( 即 半 秒 ) 完成 动画 。 但 如 果 依 次 给 每 个 元 素 设 定 了 100 这 
秒 的 延迟 (i * 100)， 那 么 所 有 过 渡 动 画 的 总 时 间 将 为 2400 毫秒: 

i 的 最 大 值 乘 以 100 毫秒 延迟 加 上 500 毫秒 持续 时 间 = 


19 四 100 + 500 二 
2400 








由 于 这 种 延迟 会 逐个 元 素 累积 ， 所 以 数据 值 越 多 ， 全 部 过 渡 动 画 运行 的 总 时 间 就 越 
长 。 如 果 需 要 动态 加 载 不 同 长 度 的 数据 集 ， 那 就 要 把 这 个 因素 考虑 进去 。 假 设 数据 
集 里 一 下 子 有 了 10 000 个 值 (而 不 是 20 个 )， 那 要 看 完整 段 动画 就 得 花 很 长 时 间 
(精确 地 说 ， 要 花 1 000 400 毫秒 或 16.67 分 钟 ) 。 一 下 子 就 不 可 爱 了 。 


好 在 ， 我 们 可 以 根据 数据 集 的 长 度 动态 调整 延迟 时 间 。 对 D3 来 说 这 没有 什么 大 惊 
小 怪 的 ， 只 不 过 是 一 些 数学 计算 而 已 。 


打开 15_delay_dynamic_scaled.html 看 一 看 ， 这 里 的 数据 集 有 30 个 值 。 如 果 你 拿 着 
秒表 计时 ， 会 发 现 总 过 渡 时 间 是 1.5 秒 ， 或 大 约 1500 毫秒 。 


现在 再 看 看 16_delay_dynamic_scaled_fewer.html， 过 渡 代 码 一 样 ， 但 只 有 10 个 数 
据点 ， 而 总 过 渡 时 间 稍 长 了 一 些 (大 概 长 了 20%)， 因 此 总 时 间 还 是 : 1.5 秒 | 


.transition() 
.delay (function(d, i) { 

return i / dataset.length * 1000; // <-- 这 里 的 代码 是 关键 
}) 


.duration(500) 


前 面 两 个 示例 页 面 使 用 的 都 是 这 个 延迟 计算 方法 : 把 简单 的 用 i 乘 以 静态 延迟 时 间 
值 ， 改 为 先 用 dataset .length 除 i (从 而 达到 了 把 这 个 值 归 一 化 的 效果 )， 然 后 
再 用 得 到 的 值 乘 以 1000 ( 即 1 秒 )。 结 果 就 是 最 后 一 个 元 素 的 延迟 时 间 为 1000， 而 
之 前 每 个 元 素 的 延迟 时 间 渐 次 缩短 。 最 大 的 延迟 1000 加 上 500 等 于 1.5 秒 的 总 过 渡 
时 间 。 


这 样 来 设置 延迟 非常 合理 ， 因 为 能 确保 代码 的 可 伸缩 性 。 无 论 数 据点 只 有 10 个 ， 还 
是 多 达 10 000 个 ， 总 的 过 渡 时 间 都 是 可 以 接受 的 。 


9.3.4 使 用 随机 数据 

为 了 展示 这 件 事 有 多 酷 ， 我 们 要 重用 一 下 第 5 章 的 随机 数 生 成 代码 。 这 样 就 能 想 更 
新 多 少 次 就 更 新 多 少 次 ， 而 且 每 次 使 用 的 都 是 新 数据 集 。 找 到 响应 单 击 事件 的 匿名 
国 数 ， 把 其 中 的 静态 数据 集 替 换 成 以 下 随机 生成 数据 集 的 代码 : 








// 生成 新 数据 集 

var numValues = dataset.length,; // 取得 原 数 据 集 的 长 度 
dataset = []; // 初始 化 空 数 组 

for (var i = 0; i < numValues; i++) { // 循环 numValues 次 
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var newNumber = Math.floor (Math.random() * 25); // 生成 新 随机 数 (0~24) 
dataset .push (newNumber); // 把 新 数值 添加 到 数组 
} 


这 样 就 可 以 用 随机 生成 的 包含 随机 数 (0~24) 的 数组 ， 替 换 原 来 的 静态 数据 集 。 新 
数组 的 长 度 与 原 数据 集 长 度 相同 。 
然后 ， 更 新 一 下 段落 的 内 容 ， 给 大 家 一 点 提示 : 


<p>Click on this text to update the chart with new data values as many 
times as you like!</p> 


现在 打开 17_randomized_data.html 看 看 吧 ， 应 该 能 看 到 如 图 9-7 所 示 的 结果 。 





Click on this text to update the chart with new data Values as many times as you like! 





25 25 
23 
22 
21 
19 
18 18 18 
17 
16 
15 15 
13 13 
12 
11 
10 


图 9-7: 刚 开 始 的 图 表 
每 次 单 击 上 面 的 段落 ， 代 码 都 会 做 如 下 这 些 事 : 


本 生成 新 随机 数 ; 
。 把 新 值 绑 定 到 已 有 元 素 ， 
。 把 元 素 过 渡 到 与 新 值 对 应 的 新 位 置 、 新 高 度 、 新 颜色 (参见 图 9-8 ) 。 


太 酷 了 ! 如 果 你 觉得 这 不 是 很 酷 ， 或 者 一 点 也 不 酷 ， 请 关 掉 电脑 ， 出 去 散 散步 ， 让 














脑子 清醒 一 下 ， 恢 复 一 下 对 酷 的 感受 力 。 如 果 你 也 觉得 这 酷 得 简直 都 不 行 了 ， 好 好 ， 
继续 往 下 看 。 








Click on this text to update the chart with new data Values as many times as you like! 


22 22 
21 
19 
17 17 
14 
12 
10 

6 
3 3 
加 mm 贺 [En 


Click on this text to update the chart with new data values as many times as you like! 





24 
22 
21 
18 18 18 
17 
16 
15 
1 14 14 
12 12 12 


Click on this text to update the chart with new data values as many times as you like! 








2 
22 
21 
17 17 17 
15 
13 
12 12 12 
11 
10 
7 7 
4 4 
2 | 





图 9-8: 使 用 随机 数据 生成 的 图 表 每 次 都 不 同 


9.3.5 更 新 比例 尺 
独 有 具 慧 眼 的 读者 可 能 会 对 前 面 的 一 行 代码 提出 质疑 ， 


Var newNumber = 


Math.floor (Math.random() * 25) ; 
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为 什么 是 25? 在 编程 领域 ，25 是 一 个 幻 数 。 我 知道 ， 你 第 一 次 听 说 ， 但 幻 数 的 问 
题 就 在 于 ， 虽 然 听 起 来 很 好 玩 ， 却 谁 都 说 不 出 来 它 为 什么 存在 (“ 幻 数 ” 嘛 ， 也 难 
怪 )。 实 际 上 ， 这 里 用 maxvalue 代替 25 可 能 更 有 意义 : 
Var newNumber = Math.floor (Math.random() * maxValue); 

幻 数 不 见 了 ， 但 我 心里 知道 这 里 生成 的 newNumbez 最 大 不 会 超过 25。 作 为 一 个 约 
定 ， 大 家 尽量 不 要 使 用 幻 数 ， 还 是 把 它 保 存在 一 个 变量 里 ， 给 变量 起 个 有 意义 的 名 
字 更 靠 详 。 起 个 什么 名 字 有 意义 呢 ，maxValue 可 以 ，numberofTimesWatchedThe 
MovieTopSecret 当然 也 可 以 (这 个 变量 的 意思 是 “看 电影 《 笑 破 铁 幕 》 的 次 数 ”) 。 


更 重要 的 是 ， 我 知道 原来 之 所 以 选 定 25， 是 因为 更 大 的 值 超出 了 图 表 比 例 尺 的 输出 
范围 ， 会 导致 条 形 被 切 掉 。 图 9-9 展示 了 把 25 换 成 50 之 后 的 后 果 。 








22 
21 21 
19 
18 
16 
13 13 


图 9-9: 太 高 啦 ! 搞 错 幻 数 了 


问题 的 根源 并 不 在 于 选 错 了 幻 数 ， 而 在 于 应 该 与 数据 集 同步 更 新 比例 尺 。 每 次 插入 
新 数据 ， 都 应 该 校准 一 下 比例 尺 ， 确 保生 成 的 条 形 图 不 会 过 高 或 过 低 。 


更 新 比例 尺 简 单 。 还 记得 下 面 创建 yscale 的 代码 吗 : 











var yScale = d3.scale.linear() 
.domain([0, d3.max(dataset)]) 
.range ([0, h]); 


范围 不 变 〈 图 表 的 可 见 大 小 设 变 )， 只 要 在 生成 新 数据 集 之 后 更 新 比例 尺 的 值 域 就 
好 了 : 


// 更 新 比例 尺 的 值 域 
ysScale.domain([0, d3.max(dataset)]); 


这 样 就 把 输入 值 域 的 最 大 值 设置 成 了 数据 集中 最 大 的 数值 。 后 面 更 新 所 有 条 形 和 标 
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签 的 代码 本 来 就 引用 了 yscale 来 计算 各 自 的 位 置 ， 因 此 就 不 用 再 修改 其 他 代码 了 。 


看 一 看 18_dynamic_scale.html 吧 ， 我 已 经 把 幻 数 25 替换 成 了 maxvValue， 而 这 个 变 
量 现在 被 设置 为 100。 此 时 单 击 段落 更 新 数据 ， 就 能 得 到 0~100 之 间 的 随机 数 。 而 
且 ， 如 果 数 据 集 中 最 大 的 值 是 100， 那 yscale 的 值 域 也 会 扩展 到 100， 如 图 9-10 
所 示 。 











100 
Sh [rs 
77 75 
71 
64 
51 
28 
上 


9-10; 根据 随机 数据 生成 的 条 形 图 ， 但 y 轴 比 例 能 够 自动 适应 了 
由 于 数据 是 随机 生成 的 ， 最 大 值 不 一 定 总 是 100， 所 以 在 图 9-11 中 能 看 到 的 最 大 数 








是 85。 














70 72 
58 
52 50 
39 
33 33 
10 10 | 10 
四 加 加 加 加 


图 9-11; 数据 有 了 变化 ， 因 此 比例 尺 也 跟着 变化 了 
要 注意 的 是 ， 图 9-10 中 值 为 100 的 条 形 与 图 9-11 中 值 为 85 的 条 形 高 度 相同 。 因 为 
数据 变 了 ， 比 例 尺 输入 值 域 变 了 ， 而 可 见 的 输出 范围 则 没 变 。 


9.3.6 更 新 数 轴 
这 个 条 形 图 没有 数 轴 ， 但 上 一 章 那 个 散 点 图 有 啊 (参见 图 9-12)。 把 那个 例子 拿 过 
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来 ， 改 一 改 ， 就 是 19_axes_static.html。 





Click on this text to update the chart with new data Values as many times as you like! 











图 9-12: 更 新 后 的 散 点 图 ， 支 持 数据 更 新 和 动态 比例 尺 
总 结 一 下 对 这 个 散 点 图 所 做 的 改动 。 


。 单 击 上 方 的 文本 可 以 生成 新 数据 并 更 新 图 表 。 
。 更 新 数据 后 ， 使 用 了 动画 过 渡 。 


。 去 掉 了 交错 延迟 效果 ， 将 所 有 过 渡 的 持续 时 间 都 设 定 为 1 秒 (1000 毫秒 )。 


。 同时 也 更 新 x 和 y 轴 的 比例 尺 。 
。 同形 现在 有 了 固定 的 半径 。 








现在 单 击 文本 ， 看 一 看 这 些小 圆 点 四 处 穿梭 的 效果 吧 。 太 可 爱 了 ! 虽然 我 希 
圆 点 可 以 表示 有 意义 的 信息 ， 不 过 随机 数据 倒 也 挺 有 趣 啊 。 


晶 图 中 的 数 轴 没 有 变 。 不 过 ， 要 更 新 数 轴 也 很 简单 。 








首先 ， 给 x 轴 和 y 轴 分 别 添 加 类 名 x 和 y， 以 便 后 面 选择 它们 : 


// 创建 x 轴 

svg.append ("g") 
.attr("class", "x axis") // <-- 在 这 里 添加 了 x 类 
.attr("transform", "translate(0," + (h - padding) + ")") 
“Gall (xAxX1iS); 





//Create y-axis 

svg.append ("g") 
attr Glass “y axis") // <-- 在 这 里 添加 了 y 类 
.attr("transform", "translate(" + padding + ",0)") 
.Call (yAxis); 








然后 ， 找 到 响应 单 击 的 匿名 函数 ， 在 里 面 添 加 如 下 代码 : 


这 些 
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// 更 新 x 轴 

svg.select (".x.axis") 
.transition() 
.duration(1000) 
.call (xAxis); 


// 更 新 y 轴 

svg.select (".y.axis") 
.transition() 
.duration(1000) 
.Call (yAxis); 


对 每 个 数 轴 ， 我 们 分 别 做 了 以 下 儿 件 事 。 

。 选择 当前 数 轴 。 

。 初始 化 一 个 过 渡 。 

。 设 定 过 渡 的 持续 时 间 。 

。 调用 适当 的 数 轴 生 成 器 。 

记 住 ， 每 个 数 轴 生成 器 已 经 引用 了 相应 的 比例 尺 (xscale 或 yscale)。 由 于 这 些 
比例 尺 已 经 更 新 过 了 ， 所 以 数 轴 生 成 器 可 以 计算 出 新 刻度 的 位 置 。 





打开 20_axes_dynamic.html 试 试 吧 。 


同样 ，transition() 替 我 们 完成 了 所 有 揪 帧 操作 。 看 看 那些 淡 入 淡出 的 刻度 线 ， 
都 是 不 费 吹 灰 之 力 就 能 实现 的 。 


9.3.7 ”在 过 渡 开 始 和 结束 时 执行 操作 
有 时候 ， 我 们 需要 在 过 渡 开 始 和 结束 的 时 候 执 行 一 些 操 作 。 为 此 ， 可 以 使 用 
each () 方法 ， 它 能 对 选中 的 每 个 元 素 执行 任意 代码 。 


each () 接收 两 个 参数 : 


。 "start" 或 "end"; 

。 匿名 函数 ， 在 过 渡 开 始 或 结束 时 执行 。 

例如 ， 在 下 面 更 新 圆 形 的 代码 中 ， 我 们 添加 了 两 条 each () 语句 : 
// 更 新 所 有 圆 形 


svg.selectAll ("circle") 
.data (dataset) 























.transition() 
.duration(1000) 
.each ("start", function() { // <-- 在 过 渡 开 始 时 执行 
d3.select (this) 
.attr ("fill", "magenta") 
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-attr{ en 3) 
}) 
attre (ex, funetion(d) 4 
return xScale(d[0]); 
}) 
.attr ("cy", function(d) { 
return ysScale(d[1]); 





及 
.each ("end", function() { // <-- 在 过 渡 结 束 时 执行 
d3.select (this) 
.attr ("fill", "black") 
-attr (ME 2)3 
过 


可 以 看 看 21_each.html 中 的 效果 。 





单 击 触发 过 渡 动 画 后 ， 立 刻 可 以 看 到 每 个 圆 形 都 变 成 了 粉红 色 (.attr ("fill",， 
"magenta") )， 而 半径 也 变 大 了 (.attr("r"， 3) )。 然 后 过 渡 效 果 一 如 往常 。 动 
画 最 后 ， 填 充 和 半径 都 恢复 到 原始 状态 。 

















9-13: 过 渡 期 间 的 粉红 圆 形 


里 需要 注意 传 给 sach () 的 匿名 函数 。 在 这 个 匿名 函数 的 上 下 文 里 ，this 引用 着 
ee 通过 它 在 函数 里 就 可 以 随时 取得 当前 选择 的 元 素 并 修 
改 之 ， 如 下 所 示 : 








.each ("start", function() { 
d3.select (this) // 选择 'this'， 即 当前 元 素 
.attr ("fill", "magenta") // 把 'this' 的 填充 设置 为 粉红 
.attr("r", 3); // 把 'this' 的 半径 设置 为 3 
}) 
1. 谨慎 开局 


Po OO OIE OOP OE 
别 那 么 干 ! 或 者 ， 试 试 吧 ， 这 样 会 造成 整个 过 渡 中 断 : 








.each("start", function() { 
d3.select (this) 








.transition() // 新 过 渡 
.duration (250) // 新 持续 时 间 
.attr("fill", "magenta") 


attr (tt 3}2 
}) 
如 果 你 这 样 干 了 一 一 建议 你 这 么 干 一 次 看 看 ， 你 会 发 现 圆 形 确 实 会 过 渡 为 粉红 色 ， 
但 它们 的 位 置 却 不 会 再 改变 了 。 原 因 是 ， 在 默认 情况 下 ， 任 何 元 素 在 任意 时 刻 都 只 
能 有 一 个 过 渡 效 果 。 新 过 渡 效 果 会 打 断 并 覆盖 原来 的 过 渡 效 果 。 


这 不 是 个 设计 缺陷 吗 ? 不 ，D3 这 样 设计 是 有 用 意 的 。 a a 样 的 
按钮 ， 每 一 个 都 会 触发 不 同 的 数据 视图 ， 如 果 用 户 连 续 地 把 它们 都 单 击 一 遍 会 怎么 
样 ? 难道 你 不 认为 较 早 的 过 渡 应 该 中 止 ， 好 让 后 来 选择 的 视图 es 


如 果 读 者 熟悉 jQuery， 会 在 这 里 发 现 不 同 之 处 。 上 默认 情况 下 ，jQuery 会 把 所 有 过 渡 
效果 排 成 队列 ， 然 后 一 个 接 一 个 地 执行 它们 。 换 名 话说 ， 执 行 新 过 渡 不 会 自动 中 断 
原 有 过 渡 。 这 种 设计 有 时 候 会 导致 令 人 讨厌 的 界面 行为 ， 比 如 鼠标 放 到 菜单 上 再 离 
开 后 ， 菜 单 并 不 会 马上 就 淡出 ， 而 是 必须 完全 淡 入 之 后 再 淡出 。 


在 这 里 ， 代 码 之 所 以 “中 断 ” 是 因为 第 一 个 (空间) 过 渡 一 开始 ,each ("start"，...) 
就 在 每 个 元 素 上 执行 。 而 在 each () 里 头 ， 又 开始 了 第 二 个 (颜色) 过 渡 ， 这 个 过 
渡 会 覆盖 第 一 个 过 渡 ， 因 而 圆 形 永远 不 会 再 跑 到 它们 的 目标 位 置 上 了 (尽管 就 那么 
呆 在 那儿 看 起 来 也 不 错 )。 


由 于 过 渡 中 存在 的 这 个 问题 ,一定 要 记 住 只 能 在 each ("start"，...) 里 面 执行 立 
即 变 换 ， 而 不 能 再 添加 任何 过 渡 效 果 。 


2. 优雅 收场 
不 过 ， each("end", . . ) 则 支持 过 渡 。 在 执行 each ( ("rend", ...) 的 时 候 ， 主 过 
渡 已 经 结束 了 ， 因此 再 执 f 行 新 过 渡 不 会 产生 任何 副作用 。 


参见 22_each_combo_transition.html， 在 里 面 的 第 一 个 each () 语句 中 ， 我 把 粉色 的 
圆 形 半径 增 大 到 了 7。 在 第 个 each() 语句 中 ， 我 又 添加 了 两 行 设置 过 渡 和 持续 时 
间 的 代码 : 























.each("end", function() { 
d3.select (this) 
.transition() // <-- 新 代码 ! 
.duration(1000) // <-- 新 代码 | 





‘attr (ll, "Black"y} 
:tt 
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看 看 这 个 过 渡 怎 么 样 ? 太 酷 了 ! 注意 事件 发 生 的 顺序 : 


。 你 单 击 p 元 素 的 文本 ， 

。 圆 形 立即 变 成 粉红 并 增 大 ， 

。 同形 过 渡 到 新 位 置 ， 

。 圆 形 过 渡 到 原来 的 颜色 和 大 小 。 





另外 ， 试 试 一 连 串 多 单 击 几 次 p 元 素 。 快 ， 别 多 想 ， 尽 可 能 快 地 多 单 击 儿 次 。 你 会 
发 现 每 次 单 击 都 会 中 断 圆 形 的 过 渡 。( 抱 次 ,伙计 ! ) 每 个 新 过 湾 都 会 覆盖 旧 过 渡 。 
除非 你 停止 单 击 ， 给 它们 时 间 过 渡 ， 否 则 圆 形 永远 不 会 跑 到 它们 的 最 终 位 置 并 过 渡 





跟 这 个 功能 差 不 一 样 酷 的 是 ， 还 有 一 种 方法 能 够 把 多 个 过 渡 安 排 在 一 起 ， 一 个 接 一 
个 地 执行 。 怎 么 做 ? 只 要 把 多 个 过 渡 连 绥 起 来 就 行 。( 这 是 3.0 版 中 的 新 功能 ， 老 版 
不 支持 。) 比如 ， 以 前 在 each ("end"，...) 中 必须 重新 选择 元 素 ， 然 后 应 用 过 渡 ， 
而 现在 只 要 在 整个 方法 链 最 后 追加 一 个 过 渡 即 可 : 





svg.selectAll ("circle") 
.data (dataset) 
.transition () // <-- #1 过 渡 
.Guration(1000) 
.each ("start", function() { 
d3.select (this) 
.attr ("filjll", "magenta") 
attr ("Et 37):s 
}) 
:EGG function(d) { 
return xScale(d[0]); 
月 
.attr("cy", function(d) { 
return yscale(d[1]); 


}) 

.transition () // <-- #2 过 渡 
.Guration(1000) 

attr{("fill", "plack") 


‘attr ("er 2) 


试 试 包含 这 些 代码 的 23_each_combo_transition_chained.html]， 你 会 发 现 结果 完全 
一 样 。 











在 需要 顺序 执行 多 个 过 渡 时 ， 建 议 你 使 用 这 种 连 级 方法 。 然 后 ， 对 于 恰好 需要 在 过 
渡 开 始 和 结束 时 立即 执行 的 ( 非 过 渡 性 ) 变化 ， 使 用 each () 方法 。 可 以 想见 ， 通 过 
连 级 多 个 独立 的 动态 变化 的 过 渡 ， 然 后 在 这 些 过 渡 上 再 应 用 each ("start"，...) 
和 each ("end"，...)， 能 够 创造 出 相当 复杂 的 效果 。 





3. 无 过 渡 的 each () 
还 可 以 在 过 渡 的 外 部 使 用 sach() ， 作 用 就 是 针对 每 个 元 素 执行 任意 代码 。 在 过 渡 
外 部 ， 可 以 忽略 "start" 或 "end" 参数 ， 只 要 传人 匿名 函数 即 可 。 


虽然 我 们 不 会 再 举例 子 ， 但 你 可 以 在 函数 定义 中 包含 对 a 和 二 的 引用 ，D3 会 帮 你 
处 理 这 些 值 : 





.each (Eunction(d，i) { 


// 对 a 和 i 进行 处 理 





] ) ; 
4. 在 剪 切 路 径 中 包含 可 见 元 素 
不 知道 大 家 注意 没 注意 一 个 细节 ， 在 这 些 过 渡 中 ， 那 些 x 和 y 值 较 低 的 圆 形 会 超出 
图 表 区 域 的 边界 ， 与 轴线 重生 在 一 起 ， 如 图 9-14 所 示 。 




















图 9-14: 圆 形 超出 了 图 表 区 域 


好 在 SVG 支持 剪 切 路 径 (clipping: path)， 也 就 是 Photoshop 或 llustrator 中 的 蒙 
版 。 剪 切 路 径 就 是 一 个 SVG 元 素 ， 可 以 包含 可 见 的 元 素 ， 并 与 这 个 可 见 元 素 一 起 构 
成 可 以 应 用 到 其 他 元 素 的 剪 切 路 径 或 莹 版。 在 把 蒙 版 应 用 到 某 个 元 素 时 ， 只 有 落 在 
该 蒙 版 图 形 内 部 的 像素 才 会 显示 。 
与 g 元 素 相 似 ，clipPath 本 身 也 不 可 见 ， 但 它 可 以 包含 可 见 的 元 素 (这 些 元 素 用 
作 蒙 版 )。 比 如 ， 下 面 就 是 一 个 简单 的 剪 切 路 径 : 

<clipPath id="chart-area'"> 


<rect x="30" y="30" width="410" height="240"></rect> 
</clipPath> 


注意 外 面 的 clipPath 元 素 有 一 个 ID， 值 为 chart-area。 后 面 会 通过 这 个 ID 来 





更 新 、 过 渡 和 动画 | 153 


引用 它 。 
使 用 剪 切 路 径 的 步骤 如 下 : 


1. 定义 clipPath 并 给 它 一 个 ID， 
2. 在 这 个 clipPath 中 放 一 个 可 见 
circle 和 其 他 可 见 元 素 ) ; 


的 元 素 (通常 是 


这 个 剪 切 路 径 内 部 有 一 个 矩形 ， 将 被 用 作 蒙 版 。 


个 *ect， 但 也 可 以 包含 

















3. 在 需要 使 用 蒙 版 的 元 素 上 添加 一 个 对 clipPath 的 引用 。 




















仍 以 前 面 的 散 点 下 面 我 们 通过 


第 2 步 ) : 


// 定义 剪 切 路 径 

svg.append ("clipPath") 
.attr("id", "chart-area") 
.append ("rect") 


图 为 例 ， 


和 心包 
本 
直人 
st 


"x", padding) 

"y", padding) 

"width", w - padding * 3) 
"h 


eight", h - padding * 2); 


我 们 希望 把 这 个 蒙 版 应 用 给 所 有 图形， 可 以 分 别 为 每 个 加 
但 把 所 有 回 形 都 放 到 一 个 分 组 g 中， 然后 给 这 


clipPath 的 引用 。 
会 让 代码 更 清晰 也 更 简单 (完成 


因此 ， 我 们 要 修改 以 下 代码 : 


// 创建 圆 形 
svg.selectAll ("circle" 
.data (dataset) 
.enter () 
.append ("circle'") 


第 3 步 ) : 














些 新 代码 来 定义 剪 切 路 径 (完成 


第 1 步 和 


// 创建 新 的 clipPath 元 素 

// 为 它 指定 ID 

// 在 clipPath 中 ， 
元 素 

// 设置 rect 的 位 置 和 大 小 …… 





创建 并 添加 新 的 rect 








形 都 添加 一 个 对 该 
个 分 组 添加 引用 ， 





创建 新 的 5 元 素 ， 给 它 任意 指定 一 个 ID ， 最 后 把 对 ID 为 cnart-area 的 剪 切 路 径 


指定 给 它 : 

















// 创建 圆 形 

svg.append("g") 
:Ed ; 
.attr("clip-path", 
.SelectAll ("circle") 
.data (dataset) 
.enter () 
.append ("circle") 


"Glireles") 


"url (#chart-area)" 


// 创建 新 的 g 元 素 
// 指定 它 的 ID 为 circles 

) // 添加 对 clipPath 的 引用 
// 剩 下 的 代码 跟 以 前 一 样 …… 





注意 在 指定 剪 切 路 径 时 使 用 的 属性 名 叫 clip-path， 而 这 个 元 素 的 名 称 是 
clipPath。 啊 ! 我 知道 ， 我 也 会 快 疯 了 。 


是 先 看 看 示例 页 面 24_clip-path.html 吧 ， 在 Web 检查 器 中 可 以 看 到 新 创建 的 算 
形 ， 如 图 9-15 所 示 。 





Click on this text to update the chart with new data values as many times as you like! 





<IDOCTYPE Wtm\> 
v<html lang="en"> 

.<head>..</head> 

v<body> 
p<p>m</p> 
p<script type="text/javascript">.</script> 
v<svg width="500" height="390"> 

Ee id="chart-area"> 





rT 
p<g id="circles" clip-path="url(#chart-area)">.,.</g> 
p<g class="x axis" transform="translate(0,270)">.</g> 
p<g class="y axis" transform="'transtate(39,9)">-</9> 
</svg> 
</body> 
</html> 











图 9-15: 位 于 人 剪 切 路 径 中 的 和 矩形 的 大 小 


由 于 剪 切 路 径 本 身 不 可 见 (只 用 于 遮挡 其 他 元 素 )， 因 此 只 能 通过 Web 检查 器 来 高 
亮 它 。 在 Web 检查 器 中 选择 这 个 clipPath 后 ， 就 会 看 到 蓝 色 的 路 径 的 轮廓 、 大 
小 。 在 图 9-15 中 ， 可 以 看 到 这 个 clipPath 的 位 置 和 大 小 都 合适 。 


另外 也 要 注意 ， 所 有 圆 形 都 已 经 被 组 织 到 一 个 g 元 素 中 了 。 这 个 g 元 素 的 clip- 
pathn 属性 指向 了 新 创建 的 剪 切 路 径 ， 语法 有 点 不 太 常 见 : url (#chart-area) 。 但 
这 都 是 SVG 标准 规定 的 。 


最 终结 果 就 是 ， 当 圆 形 跑 到 图 表 区 域 的 边界 时 ， 超 出 边界 的 部 分 会 被 剪 切 掉 。 注 意 
最 上 方 和 最 右边 的 那些 圆 形 。 
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剪 切 效果 在 过 滤 期 间 比 较 明 显 ， 参 见 图 9-16。 




















图 9-16: 圆 形 都 包含 在 图 表 区 域 中 了 
好 啦 ! 散 点 们 都 不 会 再 跑 到 图 表 区 域外 面 去 了 。 


9.4 其 他 数据 更 新 方式 


迄今 为 止 ， 只 要 更 新 数据 ， 我们 采用 的 都 是 “ 整 批 整 包 ” 的 方式 : 改变 数据 集 数组 
中 的 值 ， 然 后 重新 绑 定 修改 后 的 值 ， 覆 盖 原 始 值 对 DOM 元 素 的 绑 定 。 


这 种 方式 非常 适合 所 有 值 都 会 改变 ， 而 且 数 据 集 长 度 ( 即 数据 值 的 数量 ) 不 变 的 情 
形 。 可 是 我 们 知道 ， 现 实 中 的 数据 可 没 那 么 简单 。 这 就 对 代码 的 灵活 性 提出 了 更 高 
要 求 ， 比 如 只 更 新 一 两 个 值 ， 或 者 支持 增加 值 和 减少 值 ， 等 等 。 而 这 些 对 D3 来 说 ， 
都 是 手 到 擒 来 的 事 。 





9.4.1 添加 值 (和 元 素 ) 
再 拿 我 们 可 爱 的 条 形 图 作 例子 ， 假 设 某 些 用 户 交 互 ( 单 击 鼠标 ) 会 触发 向 数据 集中 
添加 新 值 。 换 名 话说 ， 数 据 集 的 长 度 每 次 会 加 1。 


好 ， 生 成 随机 数 并 将 其 添加 到 数组 太 人 简单 了 : 


// 向 数据 集中 添加 一 个 新 值 

Var maxValue = 25; 

Var newNumber = Math.floor (Math.random() * maxValue); 
dataset .push (newNumber); 


要 给 新 增 的 条 形 留 出 空间 来 ， 必 须 对 x 轴 的 比例 尺 进行 校正 。 而 这 也 不 过 是 更 新 其 
输入 值 域 ， 以 反映 新 数据 集 长 度 的 问题 : 
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xScale.domain(d3.range (aataset .LIength) ) ; 
很 简单 。 注 意 ， 接 下 来 准备 费 些 脑筋 吧 ， 我 们 要 深入 讨论 D3 选择 元 素 的 问题 了 。 
1. 选择 
到 现在 为 止 ， 我 们 已 经 习惯 使 用 select () 和 selectA1ll() 取得 和 返回 DOM 元 


素 。 而 且 ， 也 知道 把 这 些 方法 连 级 起 来 ， 就 可 以 从 已 经 选择 的 元 素 中 进一步 选择 元 
素 ， 比如 : 





d3.select ("body") .selectAll ("p"); // 返回 body 中 的 所 有 p 元 素 


在 需要 保存 这 些 选择 方法 返回 的 结果 时 ， 我 们 知道 最 终结 果 (也 就 是 方法 链 中 最 后 
一 个 选择 符 匹 配 的 元 素 ) 是 一 个 对 选中 元 素 的 引用 ， 可 以 保存 一 个 变量 


Var paragraphs = d3.select ("body") .selectAll ("p"); 


这 样 ，paragraphs 就 包含 了 从 DOM 中 选择 的 所 有 p 元 素 ， 无 论 p 元 素 位 于 DOM 
中 的 哪个 层次 。 


比较 费解 的 地 方 是 data () 方法 也 会 返回 一 个 元 素 集 (selection)。 特 别 地 ，qdata () 
返回 的 是 对 刚刚 绑 定 了 数据 的 所 有 元 素 的 引用 ， 可 以 称 之 为 更 新 元 素 集 。 


对 条 形 图 来 说 ， 这 就 意味 着 可 以 选择 所 有 条 形 ， 然 后 把 新 数据 一 次 重新 绑 定 到 它们 : 





// 选择 …… 
Var bars = svg.selectAll ("rect") 
.data (dataset); 


这 样 ，pars 中 就 保存 了 更 新 元 素 集 。 


2. 加 入 
在 修改 数据 值 而 整个 数据 集 的 长 度 不 变 时 ， 不 用 去 管 更 新 元 素 集 。 因 为 只 要 重新 绑 
定数 据 ， 并 将 新 值 反 映 到 新 属性 值 上 即 可 。 


可 现在 新 增 了 一 个 值 。 因 此 aataset .length 从 原来 的 20 变 成 了 21。 怎 么 处 理 
这 个 新 值 ， 尤 其 是 怎么 为 它 绘 制 一 个 新 矩形 呢 ? 希望 大 家 耐心 一 点 ， 我 会 给 大 家 讲 
清楚 。 

更 新 元 素 集 的 天 才 之 处 在 于 ， 它 在 内 部 保存 着 对 那些 加 入 和 退出 的 子 元素 集 的 引用 。 
加 入 元 素 就 是 那些 新 增 的 元 素 。 而 随时 准备 欢迎 这 样 的 元 素 是 一 种 有 涵养 的 表现 。 


只 要 绑 定 的 数据 值 比 对 应 的 DOM 元 素 多 ， 则 加 入 元 素 集 中 就 会 包含 那些 还 不 存在 
的 元 素 。 我 们 已 经 知道 怎么 访问 这 个 加 入 元 素 了 : 在 绑 定 新 数据 后 ， 调 用 enter () 
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方法 。 这 在 我 们 当初 创建 条 形 图 的 时 候 就 用 到 过 。 还 记得 以 下 代码 吧 : 


svg.selectAll ("rect") // 选择 所 有 和 抵 形 (尽管 还 不 存在 矩形 ) 

















.data (dataset) // 绑 定 数据 到 元 素 集 ， 返 回 更 新 元 素 集 
.enter () // 提取 加 入 元 素 ， 比 如 20 个 占 位 元 素 











.append ("rect") // 在 每 个 占 位 元 素 中 分 别 创建 一 个 rect 


像 这 种 selectAll1() 一 data() 一 enter() 一 append() 连 级 的 调用 形式 ， 我 们 
已 经 见 过 很 多 次 了 。 但 每 次 都 是 在 页 面 加 载 时 一 次 性 创建 很 多 元 素 。 而 现在 数据 集 
中 多 了 一 个 值 ， 同 样 可 以 使 用 enter() 来 处 理 与 这 个 新 值 对 应 的 DOM 元 素 ， 不 会 
影响 已 有 的 所 有 和 矩形 。 在 前 面 的 选择 代码 之 后 ， 再 添加 如 下 代码 : 





bars.enter () 

.append ("rect") 

attr{("x", w) 

.attr("y", function(d) { 
return h - ysScale(d); 

}) 

.attr("width", xScale.rangeBand()) 

.attr("height", function(d) { 
return yScale(d); 

}) 

attr ("fill", function(d) { 
return "rgb(0, 0, "+ (d * 10) + ")"; 


}s 


别 忘 了，bars 包含 着 更 新 元 素 集 ， 因 此 bars.enter() 会 从 中 提取 出 新 加 入 的 元 
素 。 在 这 里 ， 新 加 入 的 元 素 就 是 一 个 对 DOM 元 素 的 引用 。 然 后 ， 调 用 append () 
创建 这 个 新 *ect， 再 后 面 的 attz() 语句 一 如 往常 ， 只 有 下 面 这 一 行 不 一 样 : 





attr ("x", w) 


没 错 ， 这 行 代码 设 定 了 新 条 形 的 水 平 位 置 ， 让 它 恰好 位 于 SVG 区 域 的 最 右边 。 我 是 
希望 这 个 新 条 形 一 开始 位 于 视野 之 外 ， 这 样 才 好 使 用 平滑 的 过 湾 效 果 ， 优 雅 地 把 它 

请 进来 。 

3. 更 新 

创建 了 新 rect， 剩 下 要 做 的 就 是 更 新 所 有 和 矩形 的 可 见 属性 了 。 同 样 ， 这 里 的 bars 

保存 着 完整 的 更 新 元 素 集 (也 包括 加 入 元 素 ) : 





bars.transition() 
.Guration(500) 
‘attr ("x", function(d, 1) { 
return xScale(i); 





}) 
:attr("y", funcetion(d) 
return h - yScale(d) ; 
}) 
.attr("width", xScale.rangeBand()) 
.attr("height", function(d) { 
return ysScale(d); 


Dy) 


以 上 代码 会 让 所 有 条 形 都 过 渡 到 它们 的 新 x、y、wiath 和 height 值 。 不 信 ? 看 看 
示例 页 面 25_adding_values.html。 图 9-17 展示 了 开始 时 的 条 形 图 。 





Click on this text to add a new data value to the chart! 
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9-17: 初始 状态 的 条 形 图 
图 9-18 展示 了 单 击 文本 之 后 的 条 形 图 。 注 意 右 边 多 出 来 的 新 条 形 。 
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9-18: 单 击 之 后 的 条 形 图 
两 次 单 击 后 ， 就 得 到 了 图 9-19 所 示 的 条 形 图 。 图 9-20 展示 的 是 三 次 单 击 后 的 效果 。 
再 多 单 击 儿 次 ， 可 以 看 到 图 9-21 所 示 的 条 形 图 。 
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图 9-19: 两 次 单 击 之 后 的 条 形 图 
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图 9-20: 三 次 单 击 之 后 的 条 形 图 
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图 9-21: 多 次 单 击 之 后 的 条 形 图 

不 仅 每 次 单 击 都 会 生成 新 条 形 ， 新 条 形 能 够 自动 调整 大 小 ， 自 动 定位 ， 而 且 每 次 单 
击 之 后 ， 基 他 所 有 条 形 也 会 重新 调整 大 小 ， 重 新 排列 。 

现在 还 需要 做 的 是 为 新 条 形 创建 值 标 签 ， 并 将 它们 过 渡 到 位 。 这 个 嘛 ， 就 留 给 大 家 
当 练 习 了 。 
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9.4.2 ”删除 值 (和 元 素 ) 
删除 元 素 更 简单 一 些 。 


如 果 DOM 元 素 比 数据 值 还 多 ， 那 么 退出 元 素 集 中 会 包含 那些 没有 对 应 数据 的 元 素 
的 引用 。 想 必 大 家 已 经 猪 到 了 ， 要 访问 退出 元 素 集 ， 可 以 使 用 exit () 方法 。 


首先 ， 我 们 改 一 改 触发 文本 ， 说 明 要 删除 值 : 


<p>Click on this text to remove a data value from the chart!</p> 


然后 ， 把 每 次 单 击 时 生成 新 随机 值 并 添加 到 数据 集 ， 改 为 使 用 shift () 方法 从 数组 
中 删除 第 一 人 元 素 : 

// 从 数据 集中 删除 一 个 值 

dataset.shift(); 
1. 退出 
退出 元 素 是 指 那 些 该 删除 的 元 素 。 对 这 些 元 素 ， 我 们 应 该 礼貌 有 加 ， 视 福 它们 旅途 
愉快 。 


好 ， 先 取得 退出 元 素 集 ， 然 后 把 它们 过 渡 到 右边 ， 最 后 ， 删 除 它 们 : 


// 退出 Ws 

bars.exit () 
.transition() 
.duration(500) 
人 
.remove () ; 


这 里 的 remove () 是 一 特殊 的 过 渡 方 法 ， 它 会 在 过 渡 完 成 后 从 DOM 中 永远 地 删除 
元 素 。( 抱 歉 ， 再 也 找 不 回来 了 。) 

2. 温和 退出 

从 视觉 角度 说 ， 先 执行 过 渡 而 不 是 简单 地 调用 remove () 把 元 素 删除 是 个 不 错 的 做 
法 。 在 这 里 ， 我 们 是 先 把 条 形 移动 到 右边 ， 但 把 它们 的 不 透明 度 过 渡 为 0， 或 者 应 
用 其 他 过 渡 效 果 也 很 容易 。 


即便 如 此 ， 假 如 你 就 希望 尽快 把 元 素 删除 ， 那 就 直接 调用 *emove () ， 去 掉 开 头 的 
过 渡 效 果 也 没 问 题 。 














好 啦 ， 打 开 示 例文 件 26_removing_values.html 看 一 看 吧 ， 图 9-22 展示 了 初始 状态 
的 条 形 图 。 


单 击 一 次 文本 ， 注 意图 9-23 已 经 少 了 一 个 条 形 。 
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Click on this text to remove a data Value from the chart! 
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图 9-22: 初始 状态 的 条 形 图 
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图 9-23: 单 击 之 后 的 条 形 图 
单 击 两 次 之 后 ， 可 以 看 到 图 9-24 所 示 的 效果 。 图 9-25 展示 了 单 击 三 次 后 的 效果 。 
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图 9-24: 单 击 两 次 之 后 的 条 形 图 
多 次 单 击 之 后 ， 可 以 看 到 图 9-26 所 示 的 结果 。 
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图 9-25: 单 击 三 次 之 后 的 条 形 图 
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图 9-26: 单 击 多 次 之 后 的 条 形 图 


每 单 击 一 次 ， 都 会 有 一 个 条 形 移动 到 右边 ， 然 后 从 DOM 中 销声匿迹 。( 可 以 在 Web 
检查 器 中 确认 这 一 点 。) 


等 等 ,好 像 哪里 不 对 劲 啊 ? 首先 ， 值 标签 并 没有 消失 ， 每 个 被 删除 的 条 形 都 会 在 右 
上 角 留 下 一 个 标签 ， 越 来 越 乱 。 同 样 ， 删 除 值 标签 也 作为 一 个 练习 留 给 大 家 吧 。 


更 重要 的 是 ， 虽 然 我 们 使 用 Array.shift () 方法 从 数据 集中 删除 的 是 第 一 个 值 ， 
但 却 没有 删除 图 中 的 第 一 个 条 形 ! 是 吗 ? 是 啊 ， 你 没 注意 到 嘛 ， 每 次 单 击 都 是 最 右 
边 的 那个 条 形 被 删除 。 数 据 集 更 新 没有 问题 (注意 每 个 值 消失 的 顺序 分 别 是 5、10、 
13、19.……: )， 条 形 被 重新 赋予 了 新 值 ， 并 没有 “坚持 ”显示 原来 的 值 。 换 名 话说 ， 
数据 与 条 形 的 一 致 性 (或 目标 一 致 性 ，object: constancy) 出 了 问题 ， 即 原来 标签 
为 “5” 的 条 形 现 在 显示 “10” 了 ， 依 此 类 推 。 从 直觉 来 讲 ， 我 们 希望 标签 为 “5” 
的 条 形 自 己 从 左边 内退， 而 其 他 条 形 则 继续 显示 原来 的 值 。 


为 什么 ， 为什么， 怎么 会 发 生 这 种 事 ?! 别 急 ， 别 急 。 这 是 有 原因 的 ， 请 大 家 听 
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我 解释 。 维 护 数据 与 条 形 一 致 性 的 关键 在 哪儿 ? 就 在 键 上 。( 顺 便 告 诉 大 家 ，Mike 
Bostock 关于 对 象 值 一 致 性 写 过 一 篇 很 中 肯 的 文章 ， 推 荐 大 家 读 一 读 : http://bost. 


ocks.org/mike/constancy/, ) 


9.4.3 ”通过 键 联 结 数据 
理解 了 更 新 、 加 入 和 退出 元 素 集 ， 接 下 来 就 可 以 深入 探讨 一 下 数据 联结 (data join ) 
问题 了 。 


在 把 数据 绑 定 到 DOM 元 素 时 ( 即 调 用 aata() 时 )， 就 会 发 生 数 据 联结 。 上 默认 的 联 
结 是 按照 索引 顺序 ， 即 第 一 个 值 绑 定 到 元 素 集中 第 一 个 DOM 元 素 ， 第 二 个 值 绑 定 
到 元 素 集中 第 二 个 DOM 元 素 ， 依 此 类 推 。 


如 果 数 据 值 与 DOM 元 素 的 顺序 不 一 样 呢 ? 那 就 得 告诉 D3 怎么 实现 值 和 元 素 间 的 
联结 或 配对 。 好 在 ， 通 过 定义 键 函数 (key: function) ， 可 以 指定 相应 的 规则 。 


这 就 解释 了 我 们 前 面条 形 图 的 问题 。 在 删除 数据 集中 第 一 个 值 之 后 ， 我 们 又 在 既 有 元 
素 上 重新 绑 定 了 数据 集 。 而 数据 集中 的 值 是 按照 索引 顺序 联结 的 ， 因 此 第 一 个 矩形 
(原来 的 值 为 5)， 现 在 就 会 对 应 10。 而 之 前 对 应 10 的 矩形 ， 现 在 就 会 对 应 13， 依 此 
类 推 。 最 终 ， 还 剩 下 一 个 rect 元 素 没 有 对 应 的 数据 值 ， 也 就 是 最 右边 的 那个 条 形 。 


通过 定义 键 国 数 可 以 控制 数据 联结 的 具体 方式 ， 确 保 正确 的 数值 绑 定 到 正确 的 rect 
元 素 。 


1. 准备 数据 

到 目前 为 止 ， 我 们 的 数据 集 就 是 包含 简单 数值 的 数组 。 而 为 了 使 用 键 函 数 ， 每 个 值 
必须 有 对 应 的 键 。 什 么 是 “ 键 ”? 就 是 值 的 唯一 标识 符 ， 因 为 值 本 身 可 能 会 变 ， 也 
可 能 会 存在 相同 的 值 。( 如 果 数 据 集 里 有 两 个 值 都 是 3， 那 怎么 区 分 它们 呢 ? ) 


下 面 我 们 把 数组 改 一 改 ， 改 成 对 象 的 数组 ， 让 每 个 对 象 都 包含 一 个 键 和 一 个 实际 的 
数据 值 : 









































var dataset = [ { key: 0, value: 5 }, 
{ key: 1, value: 10 } 
{ key: 2, value: 13 } 
{ key: 3, value: 19 } 
{ key: 4, value: 21 }, 
{ key: 5, value: 25 }, 
{ key: 6, value: 22 }, 
{ key: 7, value: 18 } 
{ key: 8, value: 15 } 
{ key: 9, value: 13 }, 
{ key: 10, value: 11 }, 
{ key: 11, value: 12 }, 
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{ key: 12, value: 15 
{ key: 13, value: 20 
{ key: 14, value: 18 
{ key: 15, value: 17 
{ key: 16, value: 16 
{ key: 17, value: 18 
{ key: 18, value: 23 
{ key: 19, value: 25 





SR 


下 
还 记得 吗 ， 方 括号 〈[) 表示 数组 ， 花 括号 ({}) 表示 对 象 。 


注意 ， 这 里 的 值 其 实 并 没有 变 ， 只 是 新 增 了 很 多 键 ， 而 这 些 键 也 不 过 是 列举 了 每 个 
对 象 在 数据 集中 的 位 置 。( 顺 便 澄 清 一 下 ， 这 里 的 键 名 不 一 定 是 key， 也 可 以 是 ia、 
year 或 fruitType。 这 里 使 用 key 不 过 是 为 了 简单 。) 


2. 更 新 所 有 引用 

下 一 步 并 不 好 玩 ， 但 也 不 难 。 既 然 我 们 把 数据 都 封装 到 了 对 象 里 ， 就 不 能 再 引用 a 
了 。( 啊 ， 再 见 了 ， 过 去 的 美好 时 光 。) 代码 中 任何 要 访问 实际 数据 值 的 地 方 ， 都 必 
须 改 为 a.value。 在 D3 的 方法 中 使 用 匿名 函数 时 ，a 永远 是 数组 中 当前 位 置 的 值 。 
而 现在 ， 数 组 的 每 个 位 置 上 都 是 对 象 ， 类 似 { key: 12，value: 15 } 。 因 此 要 
取得 15， 现 在 必须 通过 d.value 了 。 


首先 ， 必 须 得 修改 yscale 的 定义 : 


Var yScale = d3.scale.linear() 
.domain([0, d3.max(dataset, function (gd) 4 return d.value; 
})]) 
.range([0, h]); 
第 二 行 原来 是 简单 的 gd3.max (dataset)， 但 那 只 对 简单 的 数组 有 效 。 现 在 我 们 使 
用 的 是 对 象 数 据 ， 就 必须 包含 一 个 访问 器 函数 ， 让 它 告 诉 a3 .max() 怎么 取得 要 比 
较 的 值 。d3 .max() 会 遍历 数组 中 所 有 的 元 素 ， 而 现在 它 知道 不 能 再 比较 da 了 ( 因 
为 a 是 一 个 对 象 ， 要 比较 对 象 可 不 容易 )。 


另外 ， 还 要 修改 响应 单 击 的 匿名 函数 中 对 yscale 的 另 一 处 引用 : 





yScale.domain([0, d3.max(dataset, function(d) { return d.value; })]); 


接 下 来 ， 因 为 所 有 设置 属性 的 地 方 都 使 用 了 a， 所 以 必须 把 它们 都 改 为 a.value。 
比如 这 里 : 


.attr("y", function(d) { 
return h - ysScale(d); 


} 


A 
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要 改 成 这 样 : 


attr (ny", function(d) { 
return h - ysScale(d.value); // <-- qd.value l 
}) 
3. 键 函 数 
最 后 ， 我 们 再 来 定义 键 国 数 ， 以 备 把 数据 绑 定 到 元 素 时 使 用 : 
Var key = function(d) { 
return d.key; 
站 
注意 到 了 吗 ， 这 个 函数 的 参数 也 是 9， 这 是 D3 的 和 惯例。 当然 ， 这 个 函数 非常 简单 ， 
只 读 取 了 传人 的 参数 a 的 属性 key 的 值 。 
现在 ， 在 四 个 绑 定数 据 的 地 方 都 把 这 行 代 码 : 
.data (dataset) 
改 成 这 样 : 
.data(dataset, key) 
对 了 ， 除 了 先 定 义 键 函 数 后 引用 ， 当 然 也 可 以 直接 把 键 函 数 写 在 调用 aata() 的 代 
码 里 ， 比 如 : 


.data(dataset, function(d) { 
return d.key; 


}) 
可 这 样 一 来 ， 四 个 地 方 就 得 写 四 遍 ， 有 点 太 累 袭 了 。 因 此 ， 还 是 先 定义 键 函 数 后 引 
用 更 简洁 。 

这 就 行 了 ! 新 数据 联结 完毕 。 

4. 退出 过 渡 

最 后 还 要 解决 一 个 问题 ， 我 们 不 是 说 过 要 让 退出 的 条 形 从 左边 闪 退 ， 而 不 是 从 右边 
授 形 嘛 : 





bars.exit () 
.transition () 
.duration(500) 
.attr("x", -xScale.rangeBand()) // <-- 从 左 侧 下 台 
.remove () ; 





A 
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太 好 了 ! 看 看 包含 所 有 新 代码 的 27_data_join_with_key.html。 刚 打开 它 时 的 界面 应 
该 如 图 9-27 所 示 。 
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9-27: 初始 状态 下 的 条 形 图 


单 击 文本 ， 则 最 左边 的 条 形 麻利 地 向 左 退 出 ， 而 其 他 所 有 条 形 会 重新 调整 到 合适 宽 
度 ， 然 后 退出 的 条 形 从 DOM 中 被 删除 。( 同 样 ， 可 以 在 Web 检查 器 中 看 到 rect 元 
素 一 个 一 个 地 消失 。) 


图 9-28 展示 了 删除 一 个 条 形 后 的 样子 。 
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9-28: 单 击 一 次 后 的 条 形 图 
单 击 两 次 ， 看 到 的 结果 如 图 9-29 所 示 。 


图 9-30 显示 了 单 击 三 次 后 的 条 形 图 ， 而 更 多 次 单 击 之 后 ， 可 以 看 到 图 9-31 所 示 的 
结果 。 
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图 9-29: 单 击 两 次 后 的 条 形 图 
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图 9-30: 单 击 三 次 后 条 形 图 






































图 9-31: 单 击 多 次 后 的 条 形 图 

这 一 回 比 之 前 要 好 多 了 。 唯 一 的 问题 就 是 标签 没有 从 左 侧 退出 ， 也 没有 从 DOM 中 
删除 ， 因 此 图 表 左 侧 显 得 很 乱 。 同 样 ， 这 个 问题 还 是 交 给 你 解决 吧 。 把 你 新 掌握 的 
D3 技术 拿 出 来 演练 一 番 ， 把 那些 标签 都 清理 干净 | 
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9.4.4 ”添加 和 删除 组 合 拳 

现在 似乎 可 以 停 手 了 ， 新 掌握 的 技术 让 我 们 非常 满足 了 。 可 是 ， 为 什么 不 能 有 始 有 
终 ， 再 调整 一 下 图 表 ， 让 它 同时 支持 添加 和 删除 数据 值 呢 ? 

这 比 你 想象 的 简单 得 多 。 首 先 ， 需 要 两 个 不 同 的 触发 器 ， 好 让 用 户 单 击 。 为 此 ， 我 
们 再 增加 一 个 段落 ， 给 两 个 段落 各 指定 一 个 ID ， 以 便 知 道 用 户 单 击 了 哪 一 个 : 


<p idq="add">Rdd a new data value</p> 
<p id="remove">Remove a data value</p> 





接 下 来 ， 找 到 添加 事件 监听 器 的 地 方 ， 把 select () 改 成 selectA1ll () ， 这 样 才能 


d3.selectAll("p") 
orn(velicek"; funetiom() 人 


既然 一 个 函数 被 绑 定 到 了 两 个 段落 ， 那 就 得 添加 一 些 逻 辑 判 断 ， 以 告知 函数 根据 用 
户 单 击 的 段落 作出 不 同 的 处 理 。 实 现 这 种 判断 的 方式 非常 多 ， 我 们 只 介绍 最 直观 的 
一 种 。 

没 忘 记 吧 ， 在 匿名 的 监听 器 国 数 内 部 ，this 引用 被 单 击 的 元 素 \p)， 因 此 选择 
this 再 使 用 attr() 就 可 以 取得 被 单 击 元 素 的 ID : 


qdq3 .select (this) .attr ("id") 


这 行 代码 在 用 户 单 击 p#add 时 会 返回 "add"， 在 用 户 单 击 p#remove 时 会 返回 
"remove"。 我 们 把 这 个 值 保存 在 变量 中 ， 根 据 它 就 可 以 控制 if 语句 的 行为 : 





// 看 看 单 击 了 哪个 段落 


var paragraphID = d3.select (this) .attr("id"); 


// 确定 接 下 来 该 干什么 

if (paragraphID == "add") { 
//Add a data value 
Var maxValue = 25; 


var newNumber = Math.floor (Math.random() * maxValue) ; 
Var lastKeyValue = dataset [dataset.length - 1] .key; 
console.log(lastKeyValue); 
dataset .push({ 
key: lastKeyVvalue + 1, 
value: newNumber 
})s 
} else { 
// 删除 一 个 值 


dataset .shift (); 
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因此 ， 如 果 单 击 的 是 p#ada， 就 计算 一 个 新 的 随机 值 ， 然 后 查找 数据 集中 最 后 一 项 
的 键 值 。 把 该 键 值 加 1 (以 免 与 其 他 键 冲 突 ) 作为 新 对 象 的 键 ， 把 新 随机 值 作为 该 
对 象 的 值 ， 创 建新 对 象 。 


其 他 地 方 不 用 再 改 了 ! 我 们 写 的 这 些 加 入 /更 新 /退出 代码 已 经 足够 灵活 ， 可 以 处 
理 添加 和 删除 数据 值 的 操作 了 。 这 正 是 代码 之 美 。 


试 一 试 28_adding_and_removing.html 吧 。 你 可 以 随意 单 击 来 添加 或 删除 数据 值 。 当 
然 ， 现实 中 的 数据 并 不 是 这 样 生 成 的 ， 但 你 想 啊 ， 其 他 事件 也 可 以 触发 这 些 数据 的 
更 新 。 比 如 ， 用 来 自 服务 器 的 数据 更 新 当前 数据 集 ， 根 本 不 用 单 击 鼠标 。 


同样 ， 再 看 看 29_dynamic_labels.htm1， 大 同 小 异 ， 区 别 只 在 于 我 已 经 更 新 了 代码 ， 
实现 了 标签 的 添加 、 过 渡 和 删除 。 











9.4.5 ”简要 回顾 
一 章 讲 的 内 容 太 多 啦 ! 好 吧 ， 咱 们 简单 回顾 一 下 。 


data() 把 数据 绑 定 到 元 素 ， 但 也 会 返回 更 新 元 素 集 。 

。 更 新 元 素 集 可 能 包含 加 入 和 退出 元 素 集 ， 这 两 个 元 素 集 可 以 通过 enter () 和 
exit () 方法 得 到 。 

。 在 数据 值 比 元 素 多 的 情况 下 ， 加 入 元 素 集 会 引用 尚 不 存在 的 占 位 元 素 。 

。 在 元 素 比 数据 值 多 的 情况 下 ， 退 出 元 素 集会 引用 疫 有 对 应 数据 的 元 素 。 

。 数据 联结 用 于 确定 数据 值 怎么 与 元 素 匹 配 。 

。 默认 情况 下 ， 数 据 联结 按照 索引 (也 就 是 值 在 数据 集中 出 现 的 顺序 ) 进行 。 

。 要 对 数据 联结 施加 更 多 控制 ， 可 以 指定 键 函 数 。 


最 后 一 点 ， 在 条 形 图 的 示例 中 ， 我 们 使 用 了 以 下 顺序 : 


1. 加 入 
2. 更 新 
3. 退出 


尽管 这 个 顺序 可 以 使 用 ， 但 不 代表 任何 时 候 都 只 能 是 这 个 顺序 。 具 体 要 看 你 的 设计 
目标 ， 可 能 需要 先 更 新 ， 然 后 加 入 新 元 素 ， 最 后 退出 旧 元 素 。 总 之 ， 完 全 要 因 时 、 
因地制宜 。 记 住 一 条 ， 只 要 手 里 有 更 新 元 素 集 ， 可 以 随时 取得 加 入 和 退出 元 素 集 。 
三 者 的 顺序 是 灵活 的 ， 取 决 你 的 需要 。 


0 RR 现在 该 来 点 真正 有 意思 的 东 
西 了 ， 那 就 是 交互 
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作为 一 个 熟悉 数据 更 新 、 过 渡 和 动画 的 老手 ， 接 下 来 应 该 考虑 实现 交互 式 的 图 表 了 。 


10.1 绑 定 事件 监听 器 


什么 ? 我 知道 ， 我 知道 ， 绑 定数 据 ， 已 经 够 人 受 的 了 。 现 在 我 又 要 讲 什么 绑 定 事 
监听 器 ? (这 正 是 JavaScript 这 门 奇怪 的 语言 如 此 受 人 追捧 的 原因 。) 

正如 第 9 章 所 提 到 的 ，JavaScript 有 一 个 事件 模型 ， 在 这 个 模型 中 ,“ 事 件 ” 由 发 生 
的 事情 来 触发 ， 比 如 用 户 通过 键盘 、 鼠 标 或 触摸 屏 输 入 信息 。 大 多 数 情况 下 ， 没 人 
监听 事件 ， 它 们 会 自生 自 灭 。 


为 了 让 图 表 具 有 交互 能 力 ， 我 们 必须 针对 一 些 事件 来 编写 代码 ， 以 便 监 听 某 些 
DOM 元 素 发 生 的 这 些 事件 。 第 9 章 曾 写 过 这 样 的 代码 : 











es 


件 






































d3.select ("p") 
on("elick", function() { 


// 单 击 后 执行 一 些 操作 





月 学 


这 样 就 给 p 元 素 绑 定 了 一 个 事件 监听 器 。 这 个 监听 器 用 于 监听 单 击 (click) 事 
件 ， 也 就 是 用 户 鼠 标 单 击 p 元 素 时 触发 的 事件 。(D3 不 使 用 自 定 义 事件 ， 但 你 自己 
可 以 定义 。 为 了 兼容 既 有 标准 ，D3 支持 所 有 JavaScript 事件 ， 比 如 mouseover 和 
click。 而 浏览 器 对 事件 的 支持 则 参差 不 齐 。 建 议 大 家 参考 Peter-Paul: Koch 的 事 
件 兼 容 性 表格 ， 地 址 : http://www.quirksmode.org/dom/events/。) 
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这 提醒 我 们 ，JavaScript 中 的 事件 不 会 在 真空 里 发 生 。 事 件 总 要 在 特定 的 元 素 上 发 
生 。 因 此 上 面 的 代码 不 会 在 任何 click 事件 发 生 时 都 执行 ， 而 只 会 在 单 击 p 元 素 时 
才 会 执行 。 


虽然 通过 纯 JavaScript 代码 也 可 以 实现 事件 绑 定 ， 但 D3 的 on () 方法 对 于 绑 定 D3 
元 素 集 则 特别 方便 。 你 也 看 到 了 ，on () 接受 两 个 参数 : 事件 名 和 在 元 素 上 发 生 事件 
时 要 执行 的 匿名 函数 。 


为 图 表 赋予 交互 能 力 很 简单 ， 只 要 两 步 : 


。 绑 定 事件 监听 器 
。 定义 行为 。 


Ap 一 人 
10.2 什么 是 行为 
我 们 还 是 以 前 面 实现 的 静态 条 形 图 为 例 ， 先 看 看 示例 页 面 01_start.html。 


前 面 示 例 代 码 只 在 一 个 元 素 p 上 绑 定 了 事件 监听 器 ， 这 对 on () 来 说 是 个 不 太 常 见 
的 用 法 。 更 多 的 时 候 ， 我 们 会 一 次 性 为 多 个 元 素 比 如 图 表 中 所 有 可 见 的 元 素 ) 人 
定 事 件 监听 器 。 这 也 不 难 ， 把 只 选择 一 个 元 素 的 select () 换 成 选择 多 个 元 素 的 
selectAll () ， 再 把 选择 的 元 素 集 交 给 on () 就 行 了 。 


其 至 ， 在 一 te sad 。 比 如 ， 下 面 是 我 们 创建 
条 形 图 中 矩形 的 代码 ， 我 就 在 其 末尾 添加 了 一 


// 创建 条 形 
svg.selectAll ("rect") 
.data (dataset) 
.enter () 
.append ("rect") 
// 设置 属性 〈( 略 掉 ) 
on("click", function (qd) 
// 任何 条 形 被 单 击 ， 都 会 执行 这 里 的 代码 
Da 


定义 匿名 函数 时 ， 可 以 引用 a、i, 或 二 者 都 引用 ， 一 如 平常 。 而 位 于 这 个 函数 中 的 
代码 ， 会 在 相应 的 单 击 事件 发 生 时 执行 


这 也 是 验证 数据 值 的 一 个 简便 方法 ， 比 如 : 



























































on("click", function(d) { 
console.1og(d); 
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试 一 试 02_click.html， 打 开 JavaScript 控制 台 ， 单 击 某 个 条 形 看 看 。 单 击 条 形 时 ， 
应 该 能 看 到 该 条 形 的 数据 值 被 输出 到 控制 台 。 确 实 方便 ! 

悬 停 高 亮 

根据 鼠标 交互 高 亮 元 素 是 为 图 表 赋 予 响应 能 力 的 一 种 常见 方式 ， 能 帮助 用 户 定位 和 
关注 相关 的 数据 。 


简单 的 悬 停 高 亮 只 用 CSS 就 能 实现 ， 根 本 不 要 JavaScript ! CSS 的 伪 类 选择 
符 :hover 可 以 跟 其 他 选择 符 组 合 起 来 ， 表 示 同 一 个 元 素 但 现在 鼠标 指针 正 悬 停 其 
上 的 状态 。 比 如 ， 以 下 CSS 规则 会 让 所 有 SVG 拢 形 在 鼠标 悬 停 时 变 成 橙色 ， 参 见 
图 10-1: 

rect:hover { 


fill: orange; 


} 
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10-1: 只 用 CSS 实现 的 简单 悬 停 效 果 
打开 03_hover.html， 然 后 自己 试 一 试 。 











CSS 悬 停 简 便 快 捷 ， 但 有 局 限 性 。 通 过 :hover 只 能 做 到 改变 样式 。 不 过 ， 最 新 
的 浏览 器 支持 对 SVG 元 素 应 用 新 的 CSS3 过 渡 。 试 试 把 下 面 的 代码 添加 到 上 面 
rect :hover 规则 中 : 


rect { 
-moz-transition: all 0.3s; 
-Oo-transition: all 0.3s; 
-webkit-transition: all 0.3s; 
transition: all 0.3s; 





这 是 在 告诉 浏览 器 (包括 Mozilla、Opera 和 其 他 基于 Webkit 的 浏览 器 ) ， 为 rect 
元 素 的 变化 应 用 0.2 秒 的 过 渡 效 果 。 运 行 之 后 ， 你 会 看 到 蓝 / 栖 切 换 不 再 是 突变 ， 
而 是 会 非常 平滑 地 用 0.2 秒 完成 。 确 实 不 错 1 





不 过 ， 这 些 过 渡 也 可 以 通过 JavaScript 和 D3 来 控制 ， 而 且 这 样 还 能 与 图 表 其 他 部 分 
协同 。 幸 运 的 是 ，D3 把 所 有 麻烦 的 事 都 禁 我 们 做 了 ， 因 此 写 JavaScript 代码 也 变 得 
不 那么 痛 苗 了 。 下 面 就 抛 开 CSS 重新 实现 一 下 前 面 的 悬 停 变 色 效 果 。 


这 次 不 能 再 使 用 "click" 了 ， 而 要 给 on() 传 入 "mouseover"， 这 是 与 CSS 
的 :hover 等 价 的 JavaScript 事件 : 























on("mouseover", function() { 


// 在 鼠标 慧 停 时 执行 这 里 的 代码 








的 
好 ， 我 们 想 在 用 户 鼠 标 悬 停 时 把 条 形变 成 栖 色 。 而 我 们 现在 的 上 下 文 是 匿名 函数 ， 
怎么 选择 发 生 事件 的 元 素 呢 ? 


答案 在 this。 对 不 起 ， 我 说 的 确实 是 this。 只 要 选择 this， 然 后 将 其 fi11 设置 
为 orange 即 可 : 





on("mouseover", function() { 
d3.select (this) 
.attr ("filjll", "orange"); 


}) ; 


“真正 的 ”程序 员 之 所 以 不 喜欢 JavaScript， 一 个 主要 原因 就 是 这 个 关键 字 this。 在 
其 他 语言 中 ，this 的 含义 非常 明确 ， 不 像 JavaScript 中 那么 多 变 。(jQuery 粉丝 想 
必 知 道 这 方面 的 一 些 争 论 ,) 


对 我 们 来 说 ， 只 要 知道 以 下 儿 条 就 够 了 : 

。 上 下 文 很 重要 ， 

。 在 匿名 函数 中 ，D3 把 上 下 文 自动 设置 为 this， 因 此 this 引用 “我 们 要 操作 的 
当前 元 素 ”。 

换 句 话说， 在 传 给 任何 D3 方法 的 匿名 函数 中 ， 如 果 想 操作 当前 元 素 ， 只 要 引用 

this 就 行 了 。 














确实 ， 你 可 以 看 到 这 一 点 ， 打 开 04_mouseover.html (参见 图 10-2) : 
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10-2: 使 用 D3 在 鼠标 最 停 时 设置 填充 闫 色 


把 鼠标 移 到 一 个 条 形 上 ， 该 条 形 上 的 事件 监听 器 就 会 被 触发 ,然后 引用 该 条 形 的 
this 被 选中 ， 代 码 将 它 的 填充 颜色 设置 为 构 色 。 


10-2 看 起 来 不 错 ， 但 我 们 应 该 在 鼠标 离开 条 形 时 ， 再 把 填充 变 回 原来 的 颜色 。 鼠 
标 离开 时 会 触发 mouseout 事件 : 











.on("mouseout", function(d) { 
d3.select (this) 
aEtr ("HL “rgb(0, 0 W344 (GY 10) $ VW); 


] ) ; 
这 下 完美 了 ! 试 一 试 05_mouseout.html。 参 见 图 10-3。 


我 太 兴 奋 了 ， 只 用 了 8 行 JavaScript 代码 就 实现 了 CSS 用 3 行 代码 就 能 实现 的 效 
果 ! (不 ! ) 


实际 上 上， 我 真正 兴奋 的 原因 是 现在 终于 可 以 使 用 水 涧 丝 请 的 过 湾 效 果 了 (参见 图 
10-4)。 还 记得 第 9 章 的 内 容 吗 ， 实 现 过 渡 效 果 只 要 一 个 transition() 和 一 个 
duration() 即 可 : 


.on("mouseout", function(d) { 
d3.select (this) 
.transition() 
.duration(250) 
“tte (iL, VEGB(0,. OO v4 td 10) 4 OU); 


] ) ; 
打开 06_smoother.html 试 一 试 。 
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图 10-3: 左右 移动 鼠标 ， 触 发 mouseover 和 mouseout 事件 











25 25 
22 2 
21 
20 
19 
18 18 18 
17 
15 15 
13 13 
12 
11 
| 





图 10-4: 左右 移动 鼠标 (水 润 丝 滑 版 ) 
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指针 事件 与 重 又 元 素 
和 鼠标 事件 只 有 在 某 个 元 素 有 像素 被 鼠标 “接触 到 ”的 时 候 才 会 触发 。 如 果 两 
个 元 素 梧 加 在 一 起 ， 和 鼠标 经 过 的 元 素 只 是 “上 面 的 ”那个 ( 即 离 你 眼睛 更 近 
的 那个 ) 。 这 时 候 ， 只 有 上 面 的 元 素 才 会 触发 mouseover 事 件 ， 下 面 的 元 素 
不 会 。 


在 06_smoother.html 中 可 以 验证 这 一 点 。 把 鼠标 放 到 任意 一 个 条 形 上 ， 然 后 再 
把 光标 移 到 上 方 的 值 标签 上 。 你 会 看 到 条 形 从 橙色 变 成 了 蓝 色 。 由 于 文本 元 
素 位 于 条 形 前 面 ， 因 此 和 鼠标 移动 到 值 标 签 上 ， 就 会 触发 下 方 条 形 的 mouseout 
事件 。 但 从 视觉 上 看 ， 和 所 标 并 没有 离开 徐 形 区 域 ， 所 以 这 好 像 有 点 违反 直 
觉 。 但 对 于 JavaScript 而 言 ， 和 鼠标 确实 离开 条 形 了 。 


记 住 : 在 SVG 中 ， 后 加 入 DOM 的 元 素 在 视觉 层次 上 会 被 洽 染 在 先 加 入 元 素 的 
前 面 。 (参见 3.8.4 节 。) 


有 了 时候， 我 们 希望 在 菜 些 元 素 上 (比如 在 值 标签 上 ) 忽略 鼠标 事件 。 幸 好 ， 
只 要 在 CSS 中 给 要 忽略 的 元 素 添 加 一 行 代 码 即 可 : 


pointer-events: none; 


这 行 代码 会 通知 浏览 器 : “ 嘿 ， 对 这 个 元 素 不 要 触发 任何 指针 事件 (比如 
click、mouseover 或 mouseout) ， 就 当 这 个 元 素 不 在 那儿 。” 这 样 事件 就 可 以 
穿 透 这 个 元 素 ， 在 它 下 面 的 元 素 上 触发 。 


要 使 用 常规 的 CSS 选 择 符 来 选择 相应 的 元 素 。 比 如 ， 下 面 这 条 规则 将 应 用 到 所 有 
SVG 的 text 元 素 : 


svg text { 
pointer-events: none,; 


} 


如 是 不 想 在 样式 表 中 添加 规则 ， 也 可 以 在 D3 中 创建 相应 text 元 素 时 ， 直 接 设 定 这 
条 CSS 属 性 ， 比 如: 


svg.append ("text") 
// 其 他 代码 


.Style ("pointer-events'", "none"); 








10.3 分 组 SVG 元 素 


注意 啦 ，g 元 素 自身 不 会 触发 任何 鼠标 事件 。 为 什么 呢 ?” 很 简单 ， 因 为 g 元 素 没 有 
像素 ! 被 它 封装 的 元 素 ， 比 如 rect、circle 和 text 元 素 才 有 像素 。 


但 我 们 照样 可 以 把 事件 监听 器 绑 定 给 g 元 素 。 只 要 记 住 一 点 就 行 : 被 包含 在 g 元 素 
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中 的 元 素 给 人 感觉 就 是 一 个 团队 。 比 如 ， 要 是 被 包含 的 元 素 中 有 哪个 被 单 击 了 或 被 
鼠标 悬 停 了 ， 那 么 绑 定 到 g 元 素 的 事件 监听 器 也 会 被 触发 。 

在 一 组 视觉 元 素 需 要 统一 行为 的 情况 下 ， 这 种 机 制 相当 有 用 。 比 如 条 形 图 吧 ， 可 以 
把 rect 和 text 元 素 分 别 放 在 各 自 的 组 里 ， 原 来 元 素 的 层次 如 下 所 示 : 





SVG 
Prest 
Ee 
GE 
text 
text 
text 


分 组 之 后 ， 就 变 成 了 这 样 : 


SVG 
9g 

PrecGt 

text 
9g 

eet 

EE 


不 用 再 担心 什么 指针 事件 ， 也 不 用 管 什么 元 素 在 上 面 ， 只 要 给 整个 组 绑 定 事件 监听 
器 即 可 。 这 样 ， 无 论 单 击 rect 还 是 单 击 text， 都 会 触发 相同 的 代码 ， 因 为 它们 在 
一 个 组 里 。 


还 有 更 厉害 的 呢 ， 你 可 以 在 每 个 组 上 都 放 一 个 不 可 见 的 rect， 将 其 fi11 属性 设置 
为 none， 将 其 pointer-events 属性 设置 为 a11。 即 便 这 个 rect 不 可 见 ， 它 仍然 
可 以 触发 鼠标 事件 ， 而 且 它 的 高 度 与 图 表 区 域 的 高 度 是 一 样 的。 结果 就 是 鼠标 经 过 
条 形 的 任何 地 方 ， 包 括 短 条 形 上 方 “ 空 的 ”空白 区 域 ， 都 会 触发 颜色 反 转 。 


单 击 排序 
交互 式 图表 真 正 的 强大 之 处 ， 体 现在 能 够 展示 数据 的 不 同 视图 ， 吸 引用 户 从 不 同 角 
度 来 探索 数据 中 蕴藏 的 奥秘 。 


对 数据 进行 排序 是 非常 重要 的 一 种 功能 。 而 且 正如 你 所 料 ，D3 让 排序 元 素 变 得 异常 
简单 。 

仍 以 条 形 图 为 例 ， 我 们 接 下 来 给 每 个 条 形 添 加 一 个 click 事件 监听 器 ， 在 这 个 匿名 
函数 中 调用 我 们 新 定义 的 一 个 函数 sortBars () : 
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on("elick"™, function() { 
sortBars () ; 
)) 


为 简单 起 见 ， 我 们 把 它 绑 定 到 了 每 一 个 条 形 上 面 。 当 然 ， 你 完全 可 以 把 它 绑 定 到 一 
个 按钮 或 其 他 元 素 上 ， 无 论 该 元 素 在 不 在 SVG 图 形 中 。 


在 代码 最 后 ， 定 义 新 函数 并 将 其 保存 到 变量 sortBars 中 : 


var sortBars = function() { 


svg.selectAll ("rect") 

.sort (function(a, b) { 
return d3.ascending(a, b); 

} 

ransition'() 

.duration(1000) 

.attr("x", function(d, i) { 
return xScale (i); 


}); 
和 


相关 代码 可 以 查看 07_sort.html， 结 果 如 图 10-5 所 示 。 随 便 单 击 一 个 条 形 看 看 它们 
会 重 排 顺序 。 
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10-5: 单 击 排序 后 的 结果 





单 击 调用 sortBars() 时 ， 首 先 会 选择 所 有 rect 元 素 。 然 后 使 用 D3 提供 的 
sort () 方法 对 它们 进行 排序 ， 排 序 依据 是 绑 定 到 它们 的 数据 值 。sort () 需要 知道 
哪个 元 素 排 在 前 面 ， 哪 个 元 素 排 在 后 面 ， 所 以 我 们 就 传 给 了 它 一 个 比较 函数 。 


与 迄今 为 止 我 们 看 到 的 匿名 函数 不 同 ， 比 较 函 数 不 接 收 a (当前 数据 值 ) 或 i ( 当 
前 索引 ) 作为 参数 ， 而 是 接受 另外 两 个 值 : a 和 pb。 这 两 个 值 代表 来 自 两 个 不 同 元 
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素 的 数据 值 。( 给 这 两 个 参数 换 其 他 名 字 也 没 问题 ， 这 里 用 a 和 bb 也 是 一 种 惯例 。) 
这 个 比较 函数 会 针对 数组 中 的 每 一 对 元 素 都 被 调用 一 次 ， 然 后 它 比 较 a 和 ppb， 直到 
所 有 数组 元 素 都 按 我 们 指定 的 规则 排序 完毕 。 


在 比较 函数 中 ,我 们 指定 了 a 和 ob 进行 比较 的 规则 。 好 在 ，D3 已 经 写 好 了 很 
多 比较 函数 ， 我 们 就 省 事 了 ， 不 用 每 次 都 写 很 多 JavaScript 了 。 这 里 使 用 的 是 
d3 .ascendqing() ， 而 且 把 a 和 Pb 直接 传 给 了 它 。 显 然 ， 哪 个 元 素 的 值 大 ， 哪 一 个 
就 胜出 〈 返 回 ) 。sort () 就 以 这 种 方式 循环 所 有 数据 值 ， 直 至 所 有 元 素 都 排序 完 
毕 。( 注 意 ， 因 为 我 们 的 数据 都 是 数值 ， 所 以 用 da .ascending() 没 问 题 。 如 果 数 
据 包 含 的 是 字符 串 ， 用 它 可 能 就 乱 套 了 。) 


最 后 ， 排 序 工作 完成 ， 启 动 一 个 过 滤 ， 将 持续 时 间 设 为 1 秒 ， 然 后 计算 每 个 rect 
的 新 x 值 。( 这 里 调用 attr() 的 代码 是 从 一 开始 创建 rect 的 代码 那 复制 来 的 。) 


目前 来 看 ， 还 有 两 个 小 问题 。 


首先 ， 我们 还 没有 考虑 值 标签 呢 ， 所 以 它们 并 没有 跟 条 形 一 块 滑 到 位 。( 这 个 要 留 给 
大 家 当 练 习 了 。) 


其 次 ， 你 可 能 已 经 注意 到 了 ， 在 过 湾 期 间 ， 如 果 把 鼠标 移动 到 某 些 条 形 上 面 ， 这 些 
条 形 就 不 会 排 到 正确 的 位 置 上 (参见 图 10-6) 。 
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图 10-6: 被 打 断 的 过 渡 

没 错 ， 看 起 来 是 不 好 看 。 

回想 一 下 ， 第 9 章 介 绍 过 新 过 渡 效 果 会 打 断 和 覆盖 旧 过 渡 效 果 。 单 击 条 形 会 触发 一 
次 过 渡 ， 而 随后 的 鼠标 悬 停 又 会 触发 另 一 次 过 渡 。 为 了 运行 鼠标 悬 停 的 高 亮 过 渡 ， 
原来 正在 运行 的 过 渡 就 会 中 断 。 结 果 就 是 那些 被 鼠标 悬 停 过 的 条 形 永 远 不 会 到 达 它 
们 的 目标 位 置 。 
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不 用 担心 ， 这 个 例子 只 是 为 了 说 明基 停 效 果 最 好 还 是 交 给 CSS 打 理 ， 而 那些 视觉 变 
化 更 密集 的 操作 可 以 交 给 D3 和 JavaScript。 


在 08_sort_hover.html 里， 我 把 高 亮 效 果 又 还 给 了 CSS 负责 ， 同时 删除 了 
mouseover 和 mouseout 事件 监听 器 ， 因 此 过 渡 冲 突 就 不 会 再 发 生 了 。 (唯一 的 遗 
憾 是 柳 蓝 渐变 效果 没有 了 。) 


现在 ， 排 序 还 只 是 一 个 方向 上 的 。 我 们 可 以 实现 再 次 单 击 触发 重新 排序 ， 以 降序 排 
列 条 形 。 


要 记 住 当前 的 条 形 图 状态 ， 可 以 再 声明 一 个 布尔 变量 : 














Var sortOrder = false; 





然后 ， 在 sortBars () 国 数 中 ， 应 该 反 转 sortorder 的 值 ， 以 便 让 它 如 果 为 true 
就 会 变 成 false， 反 之 亦 然 : 
var sortBars = function() { 


// 反 转 sortorder 的 值 


sortOrder = !sortOrder; 


而 在 比较 函数 内 部 ， 可 以 再 添加 一 点 逻辑 ， 判 断 如 果 sortorder 为 true， 就 按 升 
序 排序 ， 否 则 按 降序 排序 : 





svg.selectAll ("rect") 
.sort (function(a, b) t 

if (sortorder) { 
return d3.ascending(a, b); 

} else { 
return d3.descending(a, b); 

} 

}) 


在 浏览 器 中 打开 09_resort.html 试 一 试 。 这 回 每 次 单 击 都 会 反 转 排序 方式 ， 如 图 
10-7 所 示 。 


再 增加 一 点 效果 会 更 酷 。 什 么 效果 ? 每 个 元 素 逐 个 延迟 过 渡 。( 还 记得 什么 是 “目标 
一 致 性 ” 吗 ? ) 

















交互 式 图 表 | 181 











21 
19 
18 
15 15 
要 13 
12 
| 


图 10-7: 第 二 次 排序 ， 降 序 


你 知道 的 ， 要 实现 这 个 效果 ， 只 需 在 transition() 后 面 添 加 一 个 aelay() 语句 
即 可 : 











.transition () 
.delay (function(d, i) { 
return i * 50; 


}) 


.duration(1000) 


好 吧 ， 再 看 一 看 10_delay.html。 每 次 单 击 后 排序 ， 很 容易 就 可 以 看 到 每 个 条 形 的 运 
动 轨迹 。 


10.4 提示 条 


在 交互 式 图 表 中 ， 提 示 条 就 是 一 个 小 的 覆盖 层 ， 用 于 展示 数据 值 。 很 多 情况 下 ， 没 
有 必要 在 默认 的 视图 中 为 每 个 数值 都 加 上 标签 ， 但 又 要 确保 这 个 层次 的 细节 让 用 户 
有 办 法 看 到 。 此 时 就 需要 提示 条 。 


本 闻 ， 我 们 介绍 三 种 在 D3 中 创建 提示 的 方法 ， 有 最 简单 的 也 有 最 复杂 的 。 





10.4.1 浏览 器 默认 提示 条 

这 应 该 是 你 首先 需要 知道 的 。 浏 览 器 默认 提示 条 简单 ， 能 起 作用 ， 但 不 好 看 。 有 些 
浏览 器 中 的 提示 条 , 干脆 就 是 难看 的 黄色 框 ， 只 要 鼠标 静止 时 间 足 够 长 ， 它 们 就 会 
现 身 。 这 种 提示 条 很 容易 实现 ， 而 出 现 的 位 置 则 由 浏览 器 决定 ， 当 然 ， 它 们 的 外 观 
我 们 同样 一 点 也 控制 不 了 。 
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图 10-8 展示 了 删除 值 标签 、 使 用 浏览 器 默认 提示 条 的 条 形 图 。 只 要 把 鼠标 放 在 任何 
条 形 上 ， 过 儿 秒 钟 就 能 看 到 提示 条 出 来 。 








10-8: 在 Safari 中 看 到 的 简单 的 浏览 器 默认 提示 条 


代码 详 见 11_browser_tooltip.html。 实 现 这 样 的 提示 条 ， 只 要 在 给 那些 需要 提示 条 的 
元 素 嵌 入 一 个 title 元 素 即 可 。 例 如 ， 在 创建 所 有 rect 元 素 后 











svg.selectAll ("rect") 
.data (dataset) 
.entez () 
.append ("rect") 


可 以 直接 把 title 元 素 追 加 进去 : 


.append ("title") 
.text (function(d) { 
return dd; 


}); 
append() 会 创建 新 的 title 元 素 ， 而 接 下 来 的 text () 会 将 其 文本 内 容 设 置 为 a， 
即 绑 定 元 素 的 值 。 
为 了 不 让 提示 条 显得 太 小 ， 可 以 在 内 容 前 面 添加 一 些 文本 (如 图 10-9 所 示 ) : 
:append ("title") 
.text (function(d) { 
return "This value is " + qi; 


7 


完整 的 代码 ， 请 参见 12_browser_tooltip_text.html。 




















图 10-9: 内 容 带 前 级 的 浏览 器 默认 提示 条 


10.4.2 SVG 元 素 提 示 条 

要 想 更 多 地 控制 提示 条 ， 就 要 将 它们 编码 为 SVG 元 素 。 

还 是 那 句 话 ， 使 用 SVG 元 素 作 提示 条 的 方案 很 多 。 我 的 方案 是 添加 事件 监听 器 ， 在 
每 次 发 生 mouseover 事件 时 ， 动 态 创建 值 标签 ， 而 在 mouseout 事件 发 生 时 ， 将 值 
标签 删除 。( 或 者 ， 可 以 预先 生成 所 有 标签 ， 而 后 根据 鼠标 悬 停 状 态 切换 它们 的 显示 
和 隐藏 属性 。 再 或 者 ， 只 创建 一 个 标签 ， 然 后 根据 需要 显示 /隐藏 并 改变 其 位 置 。) 


回 到 我 们 的 条 形 图 ， 现 在 还 得 再 把 mouseover 事件 监听 器 添加 回来 。 在 这 个 匿名 函 
数 中 ， 首 先 取 得 当前 元 素 的 x 和 y 值 (用 this， 记 得 吧 ? )， 我 们 要 用 这 两 个 值 确 
定 新 提示 条 的 位 置 ， 以 便 它 恰好 出 现在 触发 事件 的 条 形 “ 上 面 ”。 


取得 这 两 个 值 之 后 ， 分 别 把 它们 传 给 parseFloat () 这 个 JavaScript 函数 :“ 嘿 ， 就 
算 这 是 个 字符 串 ， 拜 托 也 把 它 给 我 转换 成 浮 点 值 。 


最 后 ， 把 x 和 yY 都 加 大 一 些 ， 以 便 让 提示 条 位 于 条 形 顶 部 的 中 间 
.on("mouseover", function(d) { 


// 取得 条 形 的 x/y 值 ， 增 大 后 作为 提示 条 的 坐标 








var xPosition = parseFloat(d3.select (this) .attr("x")) + xScale. 
rangeBand() / 2; 
var yPosition = parseFloat(d3.select (this) .attr("y")) + 14; 


这 是 最 麻烦 的 地 方 。 我 们 现在 所 做 的 一 切 ， 都 是 为 了 将 提示 条 创建 为 一 个 简单 的 文本 
元 素 。 当 然 啦 ， 你 也 可 以 在 这 里 添加 一 个 rect 作为 背景 ， 或 者 添加 其 他 视觉 效果 : 


// 创建 提示 条 
svg.append ("text") 
:attr("id"; "tooltip") 
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本 
.text 


nfil1l" 5 
es 


中 Ice 


attr ("x", XPosition) 
.attr("y", yPosition) 
.attr("text-anchor", "middle") 
‘attr("font=-family", “sans=serif") 
:tte( font=sLsen, TIL 
.attr ("font-weight", "bold") 

( 

(qa 


} 


， 这 是 在 以 前 值 标 签 代码 的 基础 上 简单 修改 而 来 的 。 我 们 把 x 和 y 属性 的 值 设 
定 为 刚刚 计算 得 到 的 新 位 置 值 ， 把 标签 的 实际 文本 设 定 为 传递 到 事件 监听 器 中 的 数 
据 值 a。 


没 错 


同时 要 注意 ， 我 们 给 这 个 text 元 素 指定 了 叫 tooltip 的 ID。 这 样 必 要 时 


就 容易 选择 (并 删除 ! ) 该 元 素 : 


(mouseout) » 


.on("mouseout", function() { 


// 删除 提示 条 
d3.select ("#tooltip") 


.remove () ; 
}) 
测试 一 下 代码 吧 ， 在 13_svg_tooltip.html 里 面 。 


如 图 10-10 所 示 ， 使 用 SVG 元 素 作 为 提示 条 ， 可 以 获得 更 新 控制 。 
点 时 间 。 当 然 ， 我 相信 你 可 以 做 得 比 这 个 简单 的 例子 更 好 。 


要 控制 就 得 多 花 








10-10: SVG 元 素 提 示 条 











10.4.3 ”HTML 的 aiv 提 示 条 
与 使 用 SVG 元 素 类 似 ， 也 可 以 使 用 HTML 的 aiv 元 素 作为 提示 条 ， 这 适用 于 如 下 
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情形 : 


。 实现 的 效果 通过 SVG 不 可 能 做 到 ， 或 者 支持 不 够 好 〈 例 如 CSS 阴影 ) ; 
。 提示 条 要 超出 SVG 图 形 的 边界 。 


先 看 一 看 图 10-11 和 图 10-12 给 出 的 例子 吧 。 





ImportantLabel Heading 
站 16% 


10-12: 用 HTML 的 aiv 元 素 创建 的 提示 条 ， 摆 脱 了 SVG 图 形 的 限制 


还 是 那 句 话 ， 实 现 方案 不 止 一 个 。 而 我 呢 ， 喜 欢 在 HTML 里 创建 一 个 隐藏 的 aiv， 
然后 给 它 填充 上 值 ， 在 触发 事件 时 再 显示 出 来 。 最 终 代 码 可 以 参考 14_div_tooltip. 
html。 


这 个 div 可 以 使 用 D3 来 动态 生成 ， 而 我 喜欢 手工 输入 : 














图 10-11: 用 HTML 的 div 元 素 创建 的 提示 条 















<div id="tooltip" class="hidden"> 
<p><strong>Important Label Heading</strong></p> 
<p><span id="value">100</span>%</p> 

</div> 
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已 


现在 用 CSS 给 提示 条 定义 一 





样式 : 


#tooltip { 
position: absolute; 
width: 200px; 
height: auto; 
padding: 10px; 
background-color: white; 
-webkit-border-radius: 
-moz-border-radius: 
border-radius: 10px; 
-webkit-box-shadow: 


l10px; 


-moz-box-shadow: 4px 4px 10px rgba(0, 
box-shadow: 4px 4px 10px rgba(0, 


pointer-events: none; 


} 


#tooltip.hidden { 
display: none; 


} 


#tooltip p { 
margin: 0; 
font-family: sans-serif; 
font-size: 16px; 
line-height: 20px; 


} 


10Ps 


4px 4px 10px rgba(0, 0, 0, 0.4); 
0 0; Qa4)s 
0 0 Od) 


特别 注意 position 属性 的 值 是 absolute， 这 样 就 可 以 精确 控制 它 在 页 面 上 的 


位 置 了 。 而 且 ， 这 里 还 添加 了 一 些 时 化 的 
none 可 以 保证 鼠标 经 过 提示 条 





贺 角 和 阴影 。 此 外 ，pointer-events: 


` 会 触发 条 形 的 mouseout 事件 ， 从 而 让 提示 条 得 以 


继续 隐身 。( 试 试 没 有 这 一 行 会 怎么 样 ， 你 就 知道 我 说 的 是 什么 意思 了 。) 最 后 ， 给 


提示 条 添加 一 个 hiadqen 类 ， 它 就 隐身 了 。 


另外 ， 对 mouseover 事件 监听 器 也 要 做 一 





的 条 形 上 垂直 居中 。 而 且 ， 根 据 CSS 的 布 


些 改动 ， 以 便 让 这 个 aiv 大 致 在 触发 它 
局 需要 ， 这 里 的 代码 也 设 定 了 提示 条 的 


不 





left 和 top 位 置 ， 将 ID 为 value 的 span 元 素 的 文本 内 容 设 定 为 a， 然 后 一 一 因 
为 一 切 都 就 绪 了 一 一 删除 hidqaen 类 ， 让 提示 条 现 身 : 


.on ("mouseover"，function(d) 


{ 


// 取得 条 形 的 x/y 值 ， 增 大 后 作为 提示 条 的 坐标 


Var xPosition = parseFloat (d3.select (上 this) .attr("x")) + xScale.rangeBand() / 2; 





Var ypPosition 


// 更 新 提示 条 的 位 置 和 值 

d3.select ("#tooltip") 
.style("left", xPosition + "px") 
.style("top", yPosition + "px") 
.Select ("#value") 


parseFloat (d3.select (this) .attr("y")) 


/ 人 平和 
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.text (Q) ， 


// 显示 提示 条 
dq3 .select ("#tooltip") .classed("hiddqen"，false) ; 


}) 
在 mouseout 事件 发 生 时 隐藏 提示 条 就 简单 多 了 ， 只 要 添加 hiqgden 类 即 可 : 





on("mouseout", function() { 


// 隐藏 提示 条 
d3.select ("#tooltip") .classed("hidden", true); 











这 个 例子 中 的 布局 没有 大 问题 ， 但 现实 中 D3 图 表 只 是 众多 页 面 元 素 中 的 
一 人 一 部 分 ， 而 完美 的 HTML/CSS 布局 仍然 是 很 有 挑战 性 的 。 这 也 是 在 SVG 
图 表 中 采用 HTML 元 素 最 大 的 问题 。 把 提示 条 div 和 SVG 图 表 都 放 到 一 
个 元 素 (如 一 个 容器 div) 中 会 好 一 些 ， 因 为 这 样 只 要 关心 相对 位 置 就 行 
了 。d3 .mouse 可 以 让 你 取得 鼠标 相对 于 页 面 上 其 他 任何 元 素 的 坐标 ， 对 
需要 相对 鼠标 定位 非 SVG 元 素 很 有 用 。 


10.5 适应 触摸 设备 


iOS 和 Android 设备 上 的 浏览 器 能 够 自动 将 触摸 事件 转换 为 鼠标 事件 ， 以 方便 
JavaScript 编程 。 换 句 话 说 ， 触 摸 某 个 元 素 会 被 浏览 器 解释 为 一 次 click 事件 。 这 
意味 着 我 们 针对 鼠标 交互 界面 编写 的 代码 ， 很 大 程度 能 在 基于 触摸 的 界面 上 使 用 。 
主要 的 问题 是 多 点 触摸 ，D3 不 能 自动 处 理 这 些 事 件 。 虽 然 目 前 还 没有 处 理 多 点 触 
摸 事件 的 简单 方案 ,但 D3 能 为 我 们 跟踪 触摸 事件 (至 于 怎么 利用 这 些 事 件 ， 就 
是 你 的 事 了 )。 要 了 解 更 多 信息 ， 请 大 家 参考 d3 .touches 的 API 文档 吧 ， 地 址 : 
https://github.com/mbostock/d3/wiki/Selections#wiki-d3_touches。 


10.6 更 进一步 


恭喜 ! 你 现在 已 经 掌握 了 D3 所 有 的 基本 技能 。 绑 定数 据 以 及 基于 数据 生成 元 素 并 
设 定 样 式 、 创 建 比例 尺 和 绘制 数 轴 、 根 据 新 数据 修改 已 有 元 素 、 实 现 动 画 过 渡 ， 还 
有 交互 功能 ， 这 些 已 经 让 你 成 为 D3 的 高 手 了 。 你 还 奢望 什么 呢 ? 
















































































布局 和 地 图 呢 ? 好 吧 ， 接 下 来 的 两 章 我 们 就 来 介绍 这 两 个 更 加 高 级 的 主题 。 等 等 ， 
我 得 提前 声明 一 下 ， 这 两 章 可 没有 前 几 章 讲 得 那么 详细 。 反 正 你 已 经 掌握 了 基础 知 
识 了 ， 那 我 何必 多 费 口舌 呢 。 开 始 吧 ! 
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布局 





虽然 叫 “ 布 局 *， 但 大 家 可 不 能 顾名思义 。 事 实 上 ，D3 不 会 对 屏幕 上 的 元 素 布 什么 
局 。D3 的 布局 方法 没有 直接 的 视觉 输出 ， 而 是 致力 于 把 你 提供 的 数据 重新 映射 或 变 
换 成 新 格式 ， 以 便于 在 某 些 更 特定 的 图 表 中 的 使 用 。 数 据 有 了 新 格式 ， 怎 么 用 或 者 
生成 什么 图 表 ， 还 是 取决 于 你 。 


D3 全 部 的 布局 方法 如 下 。 


。 Bundle: 把 霍 尔 顿 (Holten) 的 分 层 捆绑 算法 应 用 到 连 线 (edge)。 
。 Chord: 根据 抢 阵 关系 生成 弦 形 图 (chord diagram ) 。 

。 Cluster: 聚集 实体 生成 系统 树 图 (dendrogram)。 

。 Force: 根据 物理 模拟 定位 链接 的 结 点 。 

Hierarchy: 派生 自 定义 的 系统 〈 分 层 的 ) 布局 实现 。 

。 Histogram: 基于 量化 的 分 组 计算 数据 分 布 。 

。 Pack: 基于 递归 圆 形 填 充 (circle packing) 产生 分 层 布局 。 

。 Partition: 递归 细 分 结 点 树 ， 呈 射线 或 冰 挂 状 。 

。 Pie: 计算 饼 图 或 圆 环 图 中 弧 形 的 起 止 角度 。 
。 Stack: 计算 一 系列 扒 受 的 条 形 或 面积 图 的 基线 。 
。 Tree: 整齐 地 定位 树 结 点 。 

。 Treemap: 基于 递归 空间 细 分 来 显示 结 点 树 。 


本 章 只 介绍 三 个 最 常用 的 布局 方法 : 饼 图 (Pie)、 堆 全 (Stack) 和 力 导 向 (Force)。 
这 几 种 布局 分 别 有 不 同 的 功能 ， 不 同 的 特性 。 
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要 想 了 解 其 他 的 D3 布局 方法 ， 可 以 参考 D3 网 站 上 的 大 量 实例 : https://github.com/ 
mbostock/d3/wiki/Gallery， 以 及 关于 布局 的 API 文档 : https://github.com/mbostock/ 
d3/wiki/Layouts。 


11.1 人 饼 图 布局 
d3.1layout .pie() 可 能 没有 它 听 起 来 那么 可 口 ， 但 还 是 值得 关注 。 很 明显 ， 这 个 
方法 主要 用 于 创建 饼 图 ， 如 图 11-1 所 示 。 

















图 11-1: 简单 的 饼 图 
大 家 可 以 打开 01_pie.html 随便 看 一 看 。 
要 想 画 出 这 些 漂 亮 的 扇形 ， 必 须知 道 几 个 数量 值 ， 包 括 每 个 扇形 的 内 外 半径 和 起 止 





190 | 第 11 章 


角度 。 饼 图 布局 的 用 途 就 是 根据 你 的 数据 来 计算 出 这 些 角 度 ， 让 你 根本 用 不 着 去 回 
忆 什么 叫 弧度 。 


还 记得 弧度 ?有 读者 记得 ， 有 读者 可 能 早 忘 了 。 好 吧 ， 还 是 简单 帮 你 回忆 一 下 。 
个 圆 有 360”， 即 2z 弧度 。 因 此 , zx 弧度 等 于 180”， 也 就 是 半圆 。 很 多 人 都 觉得 
度数 好 理解 ， 但 计算 机 则 更 喜欢 弧度 。 


对 于 这 个 饼 图 ， 我 们 跟 以 前 一 样 ， 还 是 使 用 了 简单 的 数据 集 ; 














var dataset = [ 5, 10, 20, 45, 6, 25 ]; 
而 要 定义 一 个 默认 的 饼 图 布局 ， 那 是 相当 简单 : 


var pie = d3.layout .pie(); 


然后 ， 剩 下 的 事 儿 就 是 把 数据 全 都 交 给 新 创建 的 pie () 函数 ， 比 如 pie (dataset)。 
下 面 比较 一 下 转换 前 后 的 数据 集 吧 ， 如 图 11-2 所 示 。 





> dataset 
[5, 10, 29, 45, 6, 25] 
> pie(ldataset) 
[Object , Object , » Object , b Object , » Object , » Object ] 
pie(ldataset) 


v 


[vObject ， VObject 
data: 5 data: 19 
endAngle: 5.283185397179586 endAngle: 5.6695273903765393 
startAngtLe: 6.000158941991317 startAngle: 5.99447457338B854 
value: 5 value: 19 
=__proto_ 3 0bject pb _proto_: Object 
vObject » vObject 
data: 29 data: 45 
endAngle: 5.0994474573388854 endAngle: 2.547237286694427 
startAngle: 3.962369112635775 startAngle: 
value: 20 value: 45 
bp__proto__: Object Pb_proto_: Object 
vObject » vObject ] 
data: 6 data: 25 
endAngle: 6.999158941991317 endAngle: 3.962369112635775 
startAngle: 5.6605273083765393 startAngle: 2.547237286694427 
Value: 6 value: 25 
bp _proto_: Object Pp__proto_: Object 











图 11-2; 你 的 数据 已 经 被 转换 成 适合 生成 饼 图 的 格式 了 


饼 图 布局 方法 把 简单 的 数值 数组 转换 成 了 对 象 的 数组 ， 每 个 值 一 个 对 象 。 每 个 对 象 
又 包含 几 个 值 ， 最 重要 的 是 startAngle 和 endangle。 哇 噢 ， 原 来 就 这 么 人 简单! 





现在 ， eR ta ne Oe en pe tn 
0 绍 过 path， 现 在 可 以 告诉 你 它 是 SVG 用 来 绘 
i ed ee 都 可 以 用 
path 来 绘制 。 问 题 在 于 ， 定 义 路 径 (path) 值 的 语法 对 人 类 并 不 怎么 友好 。 以 下 
就 是 绘制 图 11-1 中 那个 最 大 的 红色 局 形 的 代码 : 











<path fill="#d62728" d="M9.184850993605149e-15,-150A150,150 0 0,1 
83.99621792063931,124.27644738657631L0,02"></path> 


假如 你 能 看 懂 这 些 ， 那 就 不 用 看 这 本 书 了 。 


否则 ， 你 只 要 记 住 : 用 a3.svg.arc() 这 种 方法 替 我 们 生成 路 径 就 好 了 。 你 可 别 想 
着 自己 手工 来 写 这 些 东 西 。 


弧 形 是 一 个 自 定义 函数 ， 接 受 内 圆 半径 和 外 圆 半径 作为 参数 : 





Var w = 300; 

Var hh ss 3007 

Var outerRadius = w / 2; 
Var innerRadius = 0; 


Var arc = d3.svg.arc() 
.innerRadius (innerRadius) 
.outerRadius (outerRadius); 





这 里 是 把 整个 图 表 设 置 成 300 x 300 的 正方 形 ， 然 后 把 outerRadius 设 定 为 边 长 
的 一 半 ( 即 150 像素 ) ， 把 innerRadius 设 定 为 0。 稍 后 我 们 还 会 再 提 到 这 个 


innerRadius。 
现在 已 经 可 以 绘制 某 些 扇形 了 ! 首先， 创建 SVG 元 素 ， 跟 往常 一 样 : 


// 创建 svG 元 素 

var svg = d3.select ("body") 
.append ("svg") 
.attr ("width", w) 
.attr("height", h); 


接 下 来 可 以 为 每 个 要 绘制 的 扇形 创建 新 的 分 组 (g)， 把 用 于 生成 饼 图 的 数据 绑 定 到 
这 些 新 元 素 ， 并 把 每 个 分 组 平移 到 图 表 中 心 ， 好 让 路 径 出 现在 合适 的 位 置 上 : 


// 准备 分 组 
Var arcs = svg.selectAll("g.arc") 
.data (pie (dataset)) 
.enter () 
.append ("g") 
sattre ("elass "i aEe") 
.attr("transform", "translate(" + outerRadius + ", " + OuterRadius 
+ ")"); 


注意 ， 我 们 把 新 创建 的 g 元 素 的 引用 保存 到 了 变量 arcs 中 。 


最 后 ， 在 每 个 g 元素 中 ， 我 们 都 追加 一 个 path 元 素 。 路 径 相 关 属 性 的 值 都 保存 在 
qd 中 ， 所 以 这 里 调用 arc 生成 器 ， 基 于 绑 定 到 这 个 分 组 的 数据 来 生成 路 径 信息 : 


// 绘制 弧 形 路 径 

















arcs.append ("path") 
.attr ("fill", function(d, i) { 
return color(i); 
}) 


attr("d", are); 
噢 ， 你 可 能 奇怪 ， 那 些 颜 色 是 从 哪儿 来 的 ? 在 01_pie.html 里 ， 可 以 看 到 这 行 代码 : 
var color = d3.scale.category10(); 


D3 支持 一 些 生 成 分 类 颜色 的 方法 。 这 些 方法 生成 的 颜色 也 许 你 不 喜欢 ， 但 对 于 原型 
阶段 随便 生成 可 视 化 效果 则 是 非常 方便 的 。d3 .scale.category10() 会 创建 一 个 
序数 比例 尺 和 包括 10 种 颜色 的 输出 范围 。( 要 了 解 这 些 颜色 比例 尺 的 详细 信息 ， 请 
参考 相关 维基 : https://github.com/mbostock/d3/wiki/Ordinal-Scales。 其 中 还 介绍 了 
D3 采用 的 Cynthia Brewer 的 感知 颜色 校准 色 盘 。) 


最 后 ， 可 以 为 每 个 扇形 生成 文本 标签 : 





arcs.append ("text") 
.attr("transform", function(d) { 
return "translate(" + arc.centroid(d) + ")"; 
}) 
.attr("text-anchor", "middle") 
.text (function(d) { 
return d.value; 


} 


注意 在 text () 中 ,我们 引用 的 是 a.value 而 不 只 是 a。 因 为 绑 定 的 是 饼 图 数据 ， 
所 以 不 能 再 引用 原始 数组 中 的 元 素 (a)， 而 要 引用 对 象 数 组 中 的 值 (a.value)。 











唯一 陌生 的 地 方 是 arc .centroid(d)。 哈 意思 这 是 ?所 谓 图 心 (centroid ) 就 是 通 
过 计算 得 到 的 任何 图 形 的 中 心 点 ， 无 论 是 常规 图 形 (比如 正方 形 ) 还 是 极为 不 规则 
的 图 形 (比如 马里 兰州 的 边境 线 )。 在 这 里 ，arc.centroid() 是 个 超级 有 用 的 函 
数 ， 它 负责 计算 并 返回 任何 弧 形 的 中 心 点 。 然 后 ， 再 把 文本 标签 元 素平 移 到 每 个 弧 
形 的 中 心 点 。 这 就 是 文本 标签 能 够 定位 到 每 个 局 形 中心 点 的 秘密 。 





额外 提醒 : 还 记得 arc() 要 求 一 个 innerRadius 值 吧 ? 我 们 可 以 修改 这 个 值 ， 让 
它 大 于 0。 这样 ， 饼 图 就 会 变 成 图 11-3 所 示 的 圆 环 图 。 











var innerRadius = w / 3; 




















图 11-3: 简单 的 圆 环 图 
看 看 02_ring.html 吧 。 


还 有 一 点 : 饼 图 会 自动 按照 从 大 到 小 的 顺序 排列 。 我 们 最 初 的 数据 集 是 [ 5， 10， 
20，45，6，25 ] ， 因 此 你 可 能 会 认为 代表 6 的 局 形 会 位 于 代表 45 和 25 的 局 形 中 
间 ， 其 实 不 然 。 布 局 方法 会 按照 降序 对 值 进行 排序 ， 结 果 饼 图 的 12 点 方向 是 代表 
45 的 局 形 ， 其 余 局 形 依次 顺 时 针 排 列 。 


11.2 堆肥 布局 


qd3.layout .stack() 能 够 把 二 维 数据 转换 成 “ 堆 套 ”数据 ， 它 会 计算 每 个 数据 点 
的 基线 值 ， 以 便 把 数据 层 相 互 堆 闪 起 来 。 这 个 布局 方法 可 用 于 创建 堆 且 条 形 图 、 堆 
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芭 面 积 图 ， 其 至 河流 图 (stream graph， 就 是 没有 严格 零 起 点 基线 值 的 堆 芭 面积 图 )。 


下 面 我 们 以 图 11-4 所 示 的 堆 倒 条 形 图 为 例 。 


























11-4: 简单 的 堆 匣 条 形 图 


假设 有 以 下 数据 : 


var dataset = [ 

apples: 
{ apples: 
{ apples: 
{ 
{ 


一 


apples: 
apples: 
J 


5 
4 
2, 
灵 
2 


3, 


， Oranges: 
， Oranges: 
oranges: 
， Oranges: 


10, grapes: 
12, grapes: 
19, grapes: 
23, grapes: 


22 
28 
32 
35 


i gd tw 


oranges: 17, grapes: 43 } 


第 一 步 就 要 把 这 些 数据 重新 组 组成 一 个 数组 的 数组 ， 每 个 数组 代表 一 个 类 别 (如 
apples、oranges 或 grapes) 。 在 每 个 类 别 数组 中 ， 要 用 对 象 表示 每 个 数据 值 ， 而 表示 
每 个 数据 值 的 对 象 本 身 包含 x 和 y 值 。 这 里 的 x 值 其 实 就 是 有 D 值 ， 而 y 才 是 实际 


的 数据 值 : 


var dataset = [ 


L 


一 一 一 一 


XXX x 


WwW 
JADU 


AS 





[ 
{ 3 y; 10 }; 
{ 3 坏人 全 人 人 
人 2 
{ys 
{ 
]， 
[ 
22 
{ x: 1, y: 28 }, 
{ x: 2, y: 32 }, 
站 
{ a 43 } 
] 


J 


原始 数据 集 在 控制 台中 如 图 11-5 所 示 。 








> dataset 
[YArray[5] ，，TArray[5] ， vArray[5] J 
TB:; Object TB: Object TB: Object 
Xe 全 X2 @ x: 0 
ys 各 y: 19 ys 22 
p__proto_: 0bject bp__proto_: Object pp__proto_: Object 
v1: 0bject v1: Object v1: Object 
XP 龟 LI x: 1 
y: 4 ys 12 y: 28 
p__proto_: Object p__proto_: Object p__proto_: Object 
v2: Object v2: Object v2: Object 
Xs 卫 x 2 x 2 
y+ 2 y: 19 y: 32 
pp__proto_: 0bject p__proto_: Object bp__proto__: 0bject 
v3: Object v3: Object v3: Object 
xf 3 xf 3 x» 3 
ys 了 ys 23 ys 35 
p__proto__: Object p__proto_: Object p__proto_: Object 
v4: Object v4: Object v4: Object 
x 4 xs 4 x 4 
y: 23 ys 了 了 y: 43 
p__proto_: Object p__proto_: 0bject pp__proto__: 0bject 
length: 5 Length: 5 Length: 5 
p_proto_: Array[g] p__proto_: Array[g] p__proto_: Array[g] 











图 11-5: 堆 功 前 的 数据 
然后 ， 初 始 化 一 个 堆 全 布局 函数 ， 把 原始 数据 集 传 进去 : 


Var stack = d3.layout.stack(); 
stack (dataset); 


现在 ， 堆 又 后 的 数据 如 图 11-6 所 示 。 


能 发 现 差别 吗 ? 在 堆 全 后 的 数据 中 ， 每 个 对 象 都 被 赋予 了 一 个 yo 值 。 这 就 是 基线 
值 。 仔 细 看 一 看 会 发 现 ， 这 个 yo 基线 值 等 于 前 面 类 别 所 有 y 值 之 和 。 比 如 ， 上 面 
从 左 到 右 第 一 个 对 象 的 y 值 是 5， 甚 yo 值 是 0。 往 右 (oranges)， 第 二 列 第 一 个 
对 象 的 y 值 为 10， 而 yo 值 为 5 ( 啊 哈 ! 就 是 第 一 列 第 一 个 对 象 的 y 值 ! ) 最 右 一 





列 (grapes)， 第 一 个 对 象 的 y 值 为 22，y0 值 为 13 (就 是 5+10)。 





》 dataset 
[vArray[5] , vArray[5] , vArray[5] ] 
wo: Object vo: 0bject 了 TD: 0bject 
x: 0 x: 09 x:@ 
y: 5 y: 19 y: 22 
ye: 0 yY9: 5 y9: 15 
Pp__proto__: 0bject *__proto_: Object *__proto__: Object 
v1: 0bject T1: Object vw1: 0bject 
8 入 xs 1 x 1 
yy 4 y: 12 y: 28 
y9: 0 y@: 4 y9: 16 
pb__proto_: 0bject b__proto : Object pb__proto_ 3 0bject 
v2: 0bject vw2: 0bject v2: 0bject 
x: 2 xs 2 x 2 
y? 2 ys 19 ys 32 
yo: @ y0: 2 yY9: 21 
p__proto__: Object p__proto_: Object p__proto__: Object 
v3: Object v3: Object v3: Object 
Xs 3 Xs 3 xy 3 
ys 7 y: 23 y: 35 
yY9: 8 yY9@: 7 y9: 39 
bp__proto_: 0bject bp__proto_: Object bp__proto__: Object 
w4: Object v4: Object v4: Object 
x: 4 x: 4 X3 4 
y: 23 y: 17 y: 43 
yo: 8 y9: 23 y9: 49 
p__proto_: 0bject pb__proto__: 0bject p__proto_ : Object 
length: 5 length: 5 length: 5 
p__proto_: Array[9] pp__proto_: Array[g] *_proto_: Array[g] 











图 11-6: 堆 功 后 的 数据 


为 实现 元 素 在 视觉 上 的 “ 堆 姜 ”， 我 们 需要 引用 每 个 数据 对 象 的 基线 值 ， 还 有 它 的 高 
度 值 。 代 码 请 参见 03_stacked_bar.html。( 请 大 家 找 时 间 练 习 一 下 以 底部 的 x 轴 为 基 
础 实现 条 形 堆 释 。) 





Var rects = groups.selectAll ("rect") 
.data(function(d) { return d; }) 
.enter () 

.append ("rect") 

.attr("x", function(d, i) { 
return xScale (i); 

}) 

.attr("y", function(d) { 
return ysScale(d.y0); 

}) 

.attr("height", function(d) { 
return ysScale(d.y); 

}) 


.attr("width", xScale.rangeBand()); 


注意 在 设置 y 和 height 时 引用 的 分 别 是 a.yo 和 a.y。 


11.3 力 导 向 布局 


之 所 以 叫 力 导 向 (force-directed) 布局 ， 是 因为 这 种 布局 模拟 了 物理 学 中 的 力 在 屏 
幕 上 排列 元 素 的 机 制 。 尽 管 这 种 布局 被 用 得 有 点 小 ， 但 说 实话 它 确实 太 酷 了 。 几 乎 





所 有 人 都 想 学 着 做 一 个 ， 因 此 本 市 我 们 就 来 讨论 它 。 


力 导 向 布局 典型 地 要 使 用 网 状 数据 。 在 计算 机 科学 领域 ， 这 种 数据 集 叫 做 图 
(graph)。 图 由 一 组 结 点 (node) 和 连 线 (edge) 构成 。 结 点 代表 数据 集中 的 实体 ， 
连 线 代表 结 点 之 间 的 关系 。 有 些 结 点 可 能 有 连 线 ， 而 有 些 结 点 可 能 没有 连 线 。 结 点 一 
般 以 圆 形 表示 ， 连 线 就 是 线 。 当 然 ， 具 体 用 什么 元 素 取 决 于 你 。D3 只 负责 后 台 实 现 。 


从 物理 角度 看 ， 这 种 布局 表现 为 粒子 之 间 的 互 斥 作用 ,但 同时 也 由 弹 得 连接 。 互 不 
力 会 使 粒子 相互 远离 ， 避 免 在 视觉 上 重合 ， 而 弹 和 锡 可 以 防止 它们 离 得 太 远 ， 保 证 我 
们 能 在 屏幕 上 看 到 它们 。 


图 11-7 是 我 们 下 面 将 要 实现 的 例子 。 























图 11-7: 简单 的 力 导向 布局 


D3 的 力 导向 布局 需要 我 们 分 别提 供 结 点 和 连 线 ， 而 且 都 是 对 象 数 组 的 形式 。 下 面 就 
是 一 个 包含 nodes 和 edges 元 素 的 dataset 对 人 象 ， 每 个 元 素 本 身 都 是 对 象 数 组 : 


var dataset = { 

nodes: [ 
{ name: "Adam" }, 
{ name: "Bob" }, 
{ name: "Carrie" }, 
{ name: "Donovan" }, 
{ name: "Edward" }, 
{ name: "Felicity" }, 
{ name: "George" }, 
{ name: "Hannah" }, 
{ name: "Iris" }, 
{ name: "Jerry" } 

LE 

edges: | 


{ source: 0, target: 1 } 
{ source: 0, target: 2 }, 
{ source: 0, target: 3 } 
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{ source: 0, target: 4 }, 
{ source: 1, target: 5 }, 
{ source: 2, target: 5 }, 
{ source: 2, target: 5 }, 
{ source: 3, target: 4 }, 
{ source: 5, target: 8 }, 
{ source: 5, target: 9 }, 
{ source: 6, target: 7 }, 
{ source: 7, target: 8 }, 
{ source: 8, target: 9 } 


js 


一 如 往常 ，D3 不 管 你 在 这 些 对 象 中 保存 了 什么 数据 。 我 们 这 里 的 结 点 (nodes) 就 
是 人 名 ， 而 连 线 (edges) 则 包含 两 个 值 : 来 源 (source) ID 和 目标 (target) 
ID。 这 些 ID 对 应 着 上 面 的 结 点 ， 比 如 ID 为 3， 表 示 Donovan。 如 果 是 3 与 4 连 
接 ， 则 表示 Donovan 与 Edward 连接。 


对 于 生成 力 导 向 布局 而 言 ， 以 上 数据 可 以 说 是 再 简单 不 过 了 。 你 还 可 以 添加 更 多 信 
息 ， 而 且 D3 实际 上 也 会 在 我 们 提供 的 数据 基础 上 额外 添加 很 多 数据 ， 稍 后 我 们 就 
会 看 到 。 
下 面 我 们 看 一 看 怎么 初始 化 力 导 向 布局 : 

Var force = dq3.1ayout .force() 


( 
.nodes (dataset .nodes) 
.links (dataset .edges) 
[ 
( 











.Size([w, h]) 

“Start(}s 
同样 ， 这 也 是 最 低 配 置 。 在 这 里 ， 我 们 指定 要 使 用 的 结 点 和 连 线 ， 指 定 了 有 效 空间 
大 小 ， 还 在 配置 好 之 后 调用 了 start () 。 


这 样 就 能 生成 默认 的 力 导 向 布局 ， 但 默认 布局 并 不 适合 所 有 数据 集 。 你 猜 对 了 ， 
D3 提供 了 很 多 自 定义 选项 。 详 细 信 息 请 查看 相应 的 API 文档 : https://github.com/ 
mbostock/d3/wiki/Force-Layout。 在 此 ， 我 们 增 大 linkDistance (连接 结 点 的 连 
线 的 长 度 )， 以 及 结 点 之 间 的 负电 荷 (charge)， 以 便 它们 相互 把 对 方 排斥 得 更 远 。 
(这 样 做 不 太 讲 人 性 ， 但 我 只 是 想 让 它们 多 分 开 点 而 已 。) 





Var force = dq3.1ayout .force() 
.nodes (dataset .nodes) 
.links (dataset .edges) 
.size([w, h]) 





.linkDistance([50]) // <-- 新 代码 | 
.charge([-100]) // <-- 新 代码 ! 
Start(}: 


接 下 来 ， 创 建 作为 连 线 的 SVG 直线 : 





Var edges = svg.selectAll ("line") 
.data (dataset .edges) 


.enter () 
.append ("line") 
.Style ("stroke", "#ccc") 


.Style ("stroke-width", 1);，; 


注意 ， 我 们 把 所 有 线条 都 设置 成 了 相同 颜色 和 宽度 ， 而 实际 上 是 可 以 根据 数据 来 动 
态 设 置 这 些 属性 的 比如， 对 “ 强 ” 连 接 可 以 使 用 较 粗 或 较 宽 的 连 线 。) 


然后 ， 为 每 个 结 点 创建 SVG 圆 形 ， 


Var nodes = svg.selectAll ("circle") 
.data (dataset .nodes) 
.enter () 
.append ("circle") 
"attE (ue ,10) 
.style ("fill", function(d, i) { 
return colors (i); 
} 


.call (force.drag); 





我 们 把 所 有 圆 形 的 半径 都 设置 为 相等 ， 但 颜色 各 不 相同 ， 这 样 做 只 是 为 了 好 看 而 已 。 





当然 ， 这 些 值 可 以 动态 设置 ， 从 而 让 图 形 更 有 利用 价值 。 





这 里 要 看 一 看 最 后 一 行 代码 ， 这 是 在 启用 拖 放 交互 方式 。( 如 果 把 这 一 行 注释 掉 ， 用 


户 束 不 能 拖 动 结 点 了 。) 


最 后 ， 还 必须 指定 在 这 个 力 导 向 布局 “打点 ”(tick) 的 时 候 会 发 生 什么 。 在 物理 模 
拟 中 ,“ 打 点 ”用 于 代 指 经 过 一 段 时 间 ， 就 像 时 钟 上 的 秒针 走 过 一 格 一 样 。 如 果 动 画 
每 秒 钟 要 播放 30 帧 ， 那 么 打 一 次 点 就 可 以 表示 1/30 秒 。 这 样 ， 模 拟 程序 每 打 一 点 ， 
就 可 以 实时 看 到 动画 更 新 的 计算 过 程 。 在 某 些 应 用 中 ， 打 点 可 以 比 实 际 快 一 些 。 比 
如 ， 如 果 建 模 对 象 是 地 球 50 年 来 的 气候 变化 的 影响 ， 那 你 肯定 不 想 等 50 年 再 看 到 


结果 ， 因 此 就 要 提前 设置 模拟 系统 的 打点 ， 让 它 比 实际 时 间 快 。 
对 我 们 这 个 例子 来 说 ， 只 需要 知道 D3 的 力 导 向 布局 能 像 其 他 物理 








模拟 系统 一 样 


超越 时 间 向 前 “打点 "。 每 打 一 次 点 ， 力 导向 布局 就 会 根据 初始 化 布局 时 指定 的 数 
据 ， 调 整 每 个 结 点 和 连 线 的 位 置 值 。 要 亲眼 看 到 这 个 过 程 ， 就 得 更 新 与 之 关联 的 元 


素 一 一 直线 和 圆 形 : 





force.on("tick", function() { 
edges.attr("x1l", function(d) { return d.source.x; }) 
-tee(nyLn"; Eunction(d) { return d.source.y; }) 
.attr("x2", function(d) { return d.target.x; }) 
.attr("y2", function(d) { return d.target.y; }); 
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nodes.attr("cx", function(d) { return d.x; }) 
.attr("cy", function(d) { return d.y; }); 


} 
这 是 在 告诉 D3:“ 好 ， 每 打 一 次 点 ， 取 得 每 条 直线 和 每 个 圆 形 的 新 wy 值 ， 在 DOM 
中 更 新 它们 。” 
稍 等 ， 这 些 wy 值 是 从 哪 来 的 ? 我 们 只 指定 了 了 人名、 来源 和 目标 啊 ! 


D3 会 计算 这 些 wy 值 ， 并 将 它们 追加 到 原始 数据 集中 既 有 的 对 象 上 (参见 图 11-8)。 
找到 并 打开 04_force.html， 在 控制 台中 输入 aataset。 点 开 任 何 结 点 或 连 线 ， 都 能 
看 到 我 们 并 没有 提供 的 很 多 信息 。 这 是 D3 为 了 继续 执行 物理 模拟 保存 的 信息 。 调 
用 on("tick"， ...) 的 时 候 ， 我 们 只 要 指定 怎么 取得 更 新 后 的 坐标 ， 然 后 将 它们 
映射 到 DOM 中 的 可 见 元 素 即 可 。 

















> dataset 
vObject 
bp edges: Array[13] 
vnodes: Array[19] 
TD: 0bject 
index: 9 
name: "Adam 
px: 257.285794889776 
py: 210.51698817889815 
weight: 4 
x: 257.29129138880926 
y: 219.55233516917713 
bp_proto_: Object 
1: Object 
2: Object 
3: Object 
4: Object 
b5: Object 


11-8: 数据 集中 的 第 一 个 结 点 ， 包 含 D3 补充 的 很 多 信息 
那么 最 终结 果 ， 就 是 纠缠 在 一 起 圆 形 和 线条 ， 如 图 11-9 所 示 。 














11-9; 包含 10 个 结 点 和 12 条 连 线 的 简单 力 导 向 布局 
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要 查看 最 终 代 码 ， 可 以 看 看 04_force.html。 


注意 ， 每 次 刷新 页 面 ， 这 些 圆 形 和 直线 都 会 焕发 生机 ， 即 使 相对 平衡 的 状态 每 次 也 
不 一 样 。 之 所 以 每 次 的 静止 状态 都 不 一 样 ， 是 因为 存在 一 个 随机 元 素 ， 它 决定 了 贺 
点 以 什么 方式 进入 场景 。 这 瞳 示 了 力 导 向 布局 不 可 预测 的 天 性 : 这 种 布局 每 次 都 可 
能 大 不 相同 ， 而 布局 本 身 有 赖 于 数据 提供 的 结构 信息 。 如 果 数 据 具 有 较 强 的 结构 性 ， 
视觉 效果 也 会 更 好 。 


交互 性 对 于 改善 数据 视图 的 可 用 性 非常 有 好 处 。 比 如 ， 如 图 11-10 所 示 ， 我 不 喜欢 
这 里 连 线 的 摆布 方式 ， 可 以 把 粉红 色 的 圆 形 拖 出 来 。 然 后 再 把 红色 的 圆 形 向 左 向 上 
拖 一 拖 ， 如 图 11-11 所 示 。 


| 






































图 11-10: 拖 动 结 点 改变 整体 布局 














11-11: 拖 动 其 他 结 点 ， 理 顺 布局 


多 说 一 句 : 交互 性 + 物理 模拟 = 难以 抗拒 的 演示 。 我 没 法 解释 ， 但 真是 这 样 。 不 
知 何故 ， 人 类 总 是 喜欢 看 到 现实 中 的 物体 被 呈现 在 屏幕 上 。 
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地 图 








条 形 图 、 散 点 图 、 圆 环 图 ， 甚 至 还 有 力 导 向 图 …… 好 ， 都 很 好 。 你 想 想 ， 现 在 是 不 
是 该 学 习 一 下 地 图 了 ?1 


12.1 JSON 与 GeoJSON 


我 们 已 经 认识 JOSN 了 ,现在 再 认识 一 下 GeoJSON。GeoJSON 是 基于 JSON 的 、 
为 Web 应 用 而 编码 地 理 数据 的 一 个 标准 。 实 际 上 ，GeoJSON 并 不 是 另 一 种 格式 ， 
而 只 是 JSON 非常 特定 的 一 种 使 用 方法 。 

在 学 习 创 建 地 图 之 前 ， 必 须 先 取得 要 显示 的 形状 的 路 径 数据 (轮廓)。 我 们 就 举 一 个 
最 典型 的 例子 : 绘制 美国 的 州 界 。 本 书 示例 代码 中 有 一 个 文件 叫 us-states.json。 这 
个 文件 是 直接 从 D3 的 一 个 示例 中 下 载 过 来 的 ， 我 们 应 该 向 Mike Bostock 道 声 谢 ， 
感谢 他 准备 了 这 么 细致 的 州 界 文件 。 


打开 us-states.json， 会 看 到 如 下 内 容 (这 里 已 经 重 排 了 格式 并 删除 了 很 多 内 容 ) : 











人 


"type": "FeatureCollection", 
"features": [ 
TEYpe"s "Feature", 
rid" : "O11" 有 
"properties": { "name": "Alabama" }, 
"geometry": { 
TY type" : TY Polygon" A 
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"coordinates": [[[-87.359296,35.00118] ， 
[-85.606675,34.984749],[-85.431413,34.124869]， 
[-85.184951,32.859696]，,[-85.069935,32.580372]， 
[-84.960397,32.421541],[-85.004212,32.322956]， 
[-84.889196,32.262709],[-85.058981,32.13674] ... 


} 
}, 
l 
"type" "Peature"™, 
"Ld O02 
"properties": { "name": "Alaska" }, 
"geometry": { 

"type": "MultipPolygon", 

"coordinates": [[[[-131.602021,55.117982] ， 
[-131.569159,55.28229],，[-131.355558,55.183705] ， 
[-131.38842,55.01392], [-131.645836,55.035827]， 
[-131.602021,55.117982]]],[[[-131.832052,55.42469],， 
[-131.645836,55.304197], [-131.749898,55.128935]， 
[-131.832052,55.189182] ，... 

]]] 
} 
} 


典型 的 GeoJSON 数据 ， 乍 一 看 ， 一 定 是 一 个 巨大 的 对 象 。( 还 记得 花 括 号 吗 ? ) 这 
个 对 象 有 一 个 值 为 Featurecollection 的 type 属性 ， 还 有 一 个 features 属性 。 
后 者 是 一 个 数组 ， 包 含 个 别 的 Feature (地 理 特征 ) 对 象 。 每 个 Feature 对 象 代表 
美国 的 一 个 州 ， 看 它 的 properties 属性 ， 那 里 就 包含 着 州 名 。 


但 GeoJSON 文件 中 真正 有 价值 的 东西 ， 还 是 geometry 属性 。 这 个 属性 下 面包 含 
着 地 理 特征 的 类 型 (type)， 随 后 是 构成 地 理 边界 的 许多 坐标 。 在 coordinates 对 
象 中 ， 是 很 多 经 度 /纬度 值 对 ， 每 一 对 经 纬度 值 都 是 一 个 小 数组 。 这 就 是 测绘 人 员 
耗 尽心 血 得 到 的 地 理 坐 标 数 据 。 在 这 里 感谢 一 代 又 一 代 的 探险 家 和 研究 者 ， 感 谢 他 
们 为 我 们 取得 了 这 些 虽 然 微小 但 又 极其 强大 的 数据 资料 。 注 意 ， 经 度 是 每 个 小 数组 
的 第 一 个 元 素 。 因 此 ， 尽 管 英 语 国 家 的 人 习惯 说 纬度 / 经度, 但 GeoJSON 数据 中 则 
都 是 先 经 度 后 纬度 。 


另外 ， 为 了 防止 你 对 制图 知识 太 生 玻 ， 我 们 再 稍微 恶 补 一 点 地 理 常 识 : 


。 经 代表 纵向 ， 因 此 经 线 是 南北 走向 的 ， 就 像 是 从 我 们 头顶 上 下 来 的 一 样 
。 纬 代 表 横 向 ， 因 此 纬 线 是 东西 走向 的 ， 就 像 是 地 球 的 腰带 一 般 。 

经 线 和 纬 线 一 起 交织 成 了 巨大 的 网 格 ， 环 绕 着 整个 地 球 。 而 且 ， 经 度 和 纬度 恰好 能 
方便 地 转换 为 屏幕 显示 的 x 和 y 坐标 。 在 条 形 图 中 ， 我 们 就 是 把 数据 值 映 射 为 显示 
值 ， 即 矩形 的 高 度 值 的 。 在 地 图 中 ,同样 要 把 数据 值 映射 为 显示 值 ， 即 经 / 纬度 变 
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成 wy。 把 经 /纬度 想象 成 wy 可 以 避免 对 经 度 在 前 纬度 在 后 的 不 适 。 


地， 


Get Lat+Lon (http://teczno.com/squares) 是 用 于 复核 坐标 值 的 很 好 的 资 
源 ， 作 者 是 Michal Migurski。 建 议 大 家 在 绘制 地 图 的 时 候 ， 在 另 一 个 标签 
页 中 打开 这 个 网 站 ， 以 备 不 时 之 需 。 

















12.2 ”路 径 
既然 已 经 有 了 地 理 数据 ， 那 就 动手 吧 。 
首先 ， 定 义 第 一 个 路 径 生 成 器 : 

var path -= d3.geo.path(); 


d3 .geo.path() 完全 是 一 个 救 苦 救 难 的 观世音 函数 ， 它 在 后 台 帮 我们 把 乱七八糟 的 
GeoJSON 坐标 转换 成 更 乱 的 SVG 路 径 代 码 。qa3 .geo.path () 万 寿 无 绪 | 








现在 倒 可 以 把 所 有 GeoJSON 直接 放 到 HTML 文件 里 了 可 是 ， 那 么 多 坐标 和 花 
括号 ， 太 乱 了 ! 常见 的 也 是 更 清爽 的 办 法 是 把 地 理 数 据 保存 一 个 单独 的 文件 中 ， 然 
后 使 用 d3 .json () 来 加 载 : 


d3.json("us-states.json", function(json) { 








svg.selectAll ("path") 
.data(json.features) 
.enter () 
.append ("path") 
ater (a, Bath)y 


] ) ; 


d3 .json () 接受 两 个 参数 。 第 一 个 是 要 加 载 的 文件 的 路 径 ， 第 二 个 是 在 加 载 并 解析 
完 JSON 文件 后 执行 的 回调 函数 。( 参 见 5.2.2 节 “ 处 理 数 据 加 载 错 误 ”， 了 人 解 关 于 回 
调 国 数 的 细节 。) q3.json() 与 d3.csv() 类 似 ， 都 是 异步 执行 的 国 数 。 换 名 话说 ， 
浏览 器 在 等 待 外 部 文件 加 载 时 ， 其 他 代码 照样 执行 ， 不 会 受 影 响 。 因 此 ， 位 于 回调 
函数 后 面 的 代码 有 可 能 先 于 回调 函数 本 身 执行 : 


d3.json("someFile.json", function(json) { 


// 这 里 的 代码 依赖 加 载 的 JSON 








ys 
// 这 里 的 代码 不 能 依赖 JSON 


console.log("I like cats."); 


记 住 这 条 规则 :在 加 载 外 部 文件 时 ， 把 依赖 数据 的 代码 放 到 回调 函数 中 。( 或 者 把 代 
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码 放 到 其 他 自 定义 函数 中 ， 然 后 在 回调 函数 中 调用 这 些 函 数 。) 


函 
回 到 例子 中 来 。 最 后 ， 我 们 把 GeoJSON 的 地 理 特 征 绑 定 到 新 创建 的 path 元 素 ， 为 
每 个 特征 值 创建 一 个 path : 














svg.selectAll ("path") 
.data(json.features) 
.enter () 
.append ("path") 
"attre("d", path); 


注意 最 后 一 行 ， 这 里 的 a (pathn 元 素 的 数据 属性 ) 引用 着 路 径 生 成 器 ， 这 个 生成 器 会 
像 变 魔术 一 样 ， 取 得 绑 定 的 地 理 数据 并 计算 出 所 有 SVG 代码 。 结 果 如 图 12-1 所 示 。 





























12-1: 第 一 个 基于 GeoJSON 数据 生成 的 视图 
地 图 ! 原来 这 么 简单 啊 ! 打开 01_paths.html 看 看 吧 。 剩 下 的 只 是 自 定义 的 问题 了 。 





























关于 路 径 和 路 径 生 成 器 的 更 多 内 容 ， 请 参考 这 里: https://github.com/ 
mbostock/d3/wiki/Geo-Paths, 








12.3 ”投影 

聪明 的 读者 一 定 注 意 到 了 ， 这 张 地 图 并 没有 覆盖 美国 全 境 。 要 纠正 这 个 问题 ， 需 要 
修改 我 们 使 用 的 投影 (projection ) 。 
什么 是 投影 ”作为 聪明 的 读者 ， 你 一 定 也 广 意 到 了 ， 地 球 是 圆 的 ， 不 是 平 的 。 圆 形 
的 东西 都 是 三 维 的 ， 不 适合 在 二 维 平 面 上 表示 。 所 谓 投影 ， 就 是 一 种 折 中 算法 ， 一 
种 把 3D 空间 “投影 ”到 2D 平面 的 方法 。 














206 | 第 12 章 


定义 D3 投影 的 方式 我 们 很 熟悉 : 


Var projection = dq3.geo.albersUsa() 
.translate([w/2, h/2]); 


D3 有 儿 个 内 置 的 投影 。Albers USA 是 一 种 复合 投影 ， 可 以 把 阿拉 斯 加 和 夏威夷 整 
合 到 西南 地 区 的 下 方 。( 马 上 就 能 看 到 效果 了 。) albersUsa 实际 上 是 d3.path. 
geo() 默认 返回 的 投影 。 我 们 现在 明确 地 指定 它 ， 可 以 设置 几 个 自 定义 选项 ， 比 如 
平移 的 距离 。 这 里 是 把 投影 平移 到 了 SVG 图 形 的 中 央 (宽度 的 一 半 和 高 度 的 一 半 )。 


现在 唯一 要 修改 的 ， 就 是 明确 告诉 路 径 生 成 器 ， 应 该 使 用 这 个 自 定义 的 投影 来 生成 
所 有 路 径 : 























var path = d3.geo.path() 
.projection (projection); 























这 样 就 可 以 得 到 图 12-2 所 示 的 结果 。 快 点 ， 打 开 02_projection.html 看 看 代码 吧 。 

















12-2: 同样 的 GeoJSON 数据 ， 但 现在 把 投影 居中 了 


还 可 以 给 投影 添加 一 个 scale () 方法 ， 把 地 图 缩小 一 些 ， 得 到 图 12-3 所 示 的 结果 。 









































Var projection = d3.geo.albersUsa() 
.translate( [w/2, h/2]) 
.scale([500]); 





默认 的 缩放 值 是 1000， 比 这 个 值 小 就 会 缩小 地 图 ， 比 这 个 值 大 就 会 扩大 地 图 。 


大 酷 了 ! 代码 请 参考 03_scaled.html。 

















再 添加 一 个 style () 语句 ， 可 以 把 路 径 的 填充 设置 为 没 那 严肃 的 颜色 ， 比 如 图 12-4 
中 所 示 的 蓝 色 。 
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12-3: 缩小 后 的 美国 地 图 居中 显示 在 了 图 形 上 

















12-4: 蓝 色 的 地 图 比 黑 色 看 起 来 好 多 了 
完成 的 代码 在 04_fill.html 中 。 使 用 同样 的 方法 ， 还 可 以 设置 描述 颜色 和 宽度 。 


地 图 投影 是 极为 强大 的 算法 ， 不 同 的 投影 适合 不 同 的 用 途 和 世界 的 不 同 地 区 〈 比 如 
北极 附近 和 赤道 附近 )。 


主要 应 该 感谢 Jason Davies，D3 影 插件 现在 几乎 可 以 支持 任何 你 能 想象 得 
到 的 投影 算法 。 关 于 D3 的 投影 有 一 完整 的 可 视 化 参考 ， 请 访问 其 维基 : https:// 
es 另外 ， 还 有 一 个 比较 各 种 投影 的 演 
示 ， 也 很 有 参考 价值 ， http://bl.ocks.org/3711652。 


12.4 等 值 区 域 


等 值 …… 什 么 ?这 个 词 不 太 好 念 ， 它 指 的 是 不 同 区 域 填充 了 不 同 值 ( 深 或 浅 ) 或 颜 
色 ， 以 反映 关联 数据 值 的 地 图 。 在 美国 ， 人 们 常 说 的 “ 红 州 ， 蓝 州 ” 等 值 区 域 地 图 ， 
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展示 的 是 各 个 州 对 共和 党 和 民主 党 的 倾向 ， 特 别 是 在 选举 的 时 候 很 常见 。 但 等 值 区 
域 地 图 可 以 基于 任何 值 而 不 光 是 觉 派 倾向 来 生成 。 


这 些 地 图 也 是 使 用 D3 生成 最 多 的 地 图 类 型 。 尽 管 等 值 区 域 地 图 非常 有 实用 价值 ， 
但 也 不 要 忘 了 它 存在 一 些 固 有 的 感知 局 限 性 。 因为 这 种 图 使 用 而 只 来 编码 值 ， 人 口 
密度 低 而 面积 大 的 州 (比如 内 华 达 ) 从 视觉 上 会 显得 比 实际 人 数 多 。 标 准 的 等 值 区 
域 图 不 能 恰当 地 体现 人 均 指标 ， 内 华 达 州 太 大 了 ， 而 特 拉 华 州 又 太 小 了 人。 可 是 ， 这 
种 图 却 能 很 好 地 标识 地 理 区 域 ， 特 别 是 在 地 图 中 ， 看 起 来 真 的 非常 非常 酷 。 所 以 我 
们 要 好 好 探索 一 番 。( 可 以 参考 05_choropleth.html。 ) 


首先 ， 创 建 一 个 比例 尺 ， 将 数据 值 作为 输入 ， 返 回 不 同 的 颜色 。 这 是 等 值 区 域 地 图 
的 核心 所 在 : 


























Var color = d3.scale.quantize() 
.range(["rgb(237,248,233)", "rgb(186,228,179)", 
"rgb(116,196,118)", "rgb(49,163,84)","rgb(0,109,44)"]); 
以 量化 的 比例 尺 函 数 作为 线性 比例 尺 ， 但 比例 尺 输出 的 则 是 离散 的 范围 。 这 里 输出 
的 值 可 以 是 数值 、 颜 色 (这 里 就 是 )， 或 者 其 他 你 需要 的 值 。 这 个 比例 尺 适合 把 值 分 
类 为 不 同 的 组 (bucket)。 我 们 这 里 只 分 了 5 个 组 ， 实 际 上 你 想 分 儿 个 就 分 儿 个 。 


注意 ， 这 里 只 指定 了 输出 范围 ， 而 没有 指定 输入 值 域 。( 我 们 得 等 到 数据 加 载 完 毕 后 
再 做 这 件 事 。) 这 几 个 特别 的 颜色 值 来 自 D3 托管 在 GitHub 代码 库 中 的 colorbrewer. 
js 文件 (https://github.com/mbostock/d3/tree/master/lib/colorbrewer)。 这 个 文件 中 包 
含 了 为 人 类 感知 优化 的 一 批 闫 色 值 ， 由 Cynthia Brewer 根据 她 的 研究 选 定 。 


接 下 来 ， 要 加 载 一 些 数 据 。 我 们 有 一 个 文件 叫 us-ag-productivity-2004.csv， 内 容 类 
似 如 下 所 示 : 











state,value 
Alabama,1.1791 
Arkansas,1.3705 
Arizona,1.3847 
California,l1.7979 
Colorado,1.0325 
Connecticut,1.3209 
Delaware,1.4345 


这 些 数 据 来 自 美国 农业 部 ， 报 告 内 容 是 2004 年 每 个 州 的 农业 生产 力 指 标 。 这 些 值 
的 单位 是 以 1996 年 阿拉 巴 马 州 的 生产 力 指标 为 基准 (1.0)， 更 大 的 值 表示 生产 力 更 
高 ， 更 小 的 值 表 示 生 产 力 更 低 。( 更 多 美国 政府 公开 的 数据 集 可 以 这 里 找到 : http:/ 
data.gov。) 希望 我 们 能 利用 这 些 数据 生成 一 个 漂亮 的 美国 各 州 生产 力 地 图 。 
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要 加 载 这 些 数据 ， 使 用 aa3 .csv (): 


d3.csv ("us-ag-productivity-2004.csv", function(data) { ... 
， 在 回调 函数 中 ， 要 设置 彩色 的 量化 比例 尺 的 输入 值 域 ( 趁 我 还 没 忘 ! ) : 


color.domain([ 
d3.min(data, function(d) { return d.value; }), 
d3.max(data, function(d) { return d.value; }) 


I]; 


这 里 用 到 了 aa .min() 和 gq3.max() 来 计算 并 返回 最 小 和 最 大 的 数据 值 ， 因 此 这 个 
比例 尺 的 输出 值 域 是 动态 计算 的 。 


接 下 来 ， 跟 前 面 一 样 ， 加 载 JSON 地 理 数 据 。 但 不 同 的 是 ， 在 这 里 我 想 把 农业 生产 
力 的 数据 合并 到 GeoJSON 中 。 为 什么 ? 因为 我 们 一 次 只 能 给 元 素 绑 定 一 组 数据 。 
GeoJSON 数据 肯定 必 不 可 少 ， 因 为 要 据 以 生成 路 径 ， 而 我 们 还 需要 新 的 农业 生产 力 
数据 。 为 此 ， 就 要 把 它们 混合 成 一 个 巨大 的 数组 ， 然 后 再 把 混合 后 的 数据 绑 定 到 新 
创建 的 path 元 素 。( 混 合 数据 有 几 种 方法 ， 这 里 使 用 我 喜欢 的 方法 。) 








d3.json("us-states.json", function(json) { 


// 混合 农业 生产 力 数据 和 GeoJSON 
// 循环 农业 生产 力 数据 集中 每 个 值 


for (var i = 0; i < data.length; i++) { 


// 取得 州 名 


Var dqataState = datalil] .state; 


// 取得 数据 值 ， 并 从 字符 串 转换 成 浮 点 数 


var dataValue = parseFloat (datal[li] .value); 


// 在 GeoJSON 中 找到 相应 的 州 























for (var j = 0; j < json.features.length; j++) { 
var jsonState = json.features[j] .properties.name; 
if (aataState == jsonState) { 

// 把 数据 值 复制 到 Json 中 

json.features[j] .properties.value = dataValue; 

// 停止 循环 JSON 

break; 


} 


一 行 一 行 地 仔细 看 一 遍 代码 。 大 致 来 说 ， 就 是 对 每 个 州 ， 我 们 也 找到 GeoJSON 
中 相应 的 值 (如 “Colorado”)。 然 后 取得 这 个 州 的 数据 值 ， 把 它 放 到 json. 
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features [j] .properties.value 中 ， 保 证 它 能 被 绑 定 到 元 素 ， 并 在 将 来 需要 时 
可 以 被 取出 来 。 


最 后 ， 像 以 前 一 样 创建 路 径 ， 只 是 通过 style () 要 设置 动态 的 值 : 


svg.selectAll ("path") 
.data(json.features) 
.enter() 
.append ("path") 
:ttre( nd , Path) 
.style("fill", function(d) { 
// 取得 数据 值 


var Value = d.properties.value; 





if (value) { 
// 如 果 值 存在 …… 
return color(value); 
} else { 
// 如 果 值 不 存在 …… 


return "#6Gc6G"; 
和 有 
这 样 ， 地 图 不 再 是 千篇一律 的 “ 钢 蓝 色 ”了 ， 每 个 州 的 路 径 都 有 了 不 同 的 填充 值 。 
这 里 有 些小 缺漏 ， 因 为 我 们 并 没有 掌握 所 有 州 的 数据 。 数 据 集 里 就 缺少 阿拉 斯 加 、 
哥伦比亚 特区 、 夏 威 夷 和 波多 黎 各 〈 它 虽 不 是 一 个 州 ， 但 GeoJSON 和 投影 中 也 包 
含 它 ) 等 地 的 信息 。 


为 了 弥补 这 些 缺 漏 ， 我 们 添加 了 一 点 小 逻辑 : 一 个 i£() 语句 ， 检 查 数据 值 是 否 有 
定义 。 如 果 数 据 值 存在 ， 就 返回 color (value) ， 也 就 是 说 我 们 会 把 该 数据 值 传 递 
给 量化 比例 尺 ， 由 比例 尺 返 回 颜 色 值 。 如 果 数 据 值 不 存在 ， 则 设置 默认 的 浅 灰 色 #ccc。 


非常 漂亮 ! 看 看 图 12-5 的 结果 吧 。 要 想 查 看 最 终 的 代码 ， 自 己 找 一 找 05_choropleth.html。 




















图 12-5; 美国 各 州 农业 生产 力 等 值 区 域 地 图 
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12.5 添加 定位 点 
在 地 图 上 标 出 一 些 城市 来 是 不 是 显得 更 真实 呢 ? 或 许 能 够 看 到 在 那些 生产 力 最 高 
(或 最 低 ) 的 州 有 多 少 大 城市 会 很 有 意思 ， 也 更 有 价值 。 同 样 ， 首 先 得 把 数据 找 来 。 


幸运 的 是 ， 美 国人 口 普 查 局 为 我 提供 了 数据 。( 纳 税 人 的 税 起 作用 了 ! ) 下 面 就 是 从 
美国 人 口 普 查 局 获得 的 “Annual Estimates of the Resident Population for Incorporated 
Places Over 50,000” 原 始 CSV 数据 集 的 开头 部 分 。 





table with row headers in column A and column headers in rows 3 through 4,,,,,,, 
"Table 1. Annual Estimates of the Resident Population for Incorporated Places 
Over 50,000, Ranked by July 1, 2011 Population: April 1, 2010 to July 1, 2011" 
Rank,Geographic Area,,'"April 1, 2010",,Population Estimate (as of July 1),, 
,rrrPlace,state,Census,Estimates Base,2010,2011,,,, 

1,New York city,New York,"8,175,133","8,175,133","8,186,443","8,244,910",,,, 
2,Los Angeles city,California,"3,792,621","3,792,625","3,795,761","3,819,702" 
3.Chicago city,1llinois,."2,695, S90" "2 .695, 598", "2 690985 283" ,2707;12 

OV yp 

4,Houston Gity,Texas,."2,099,.451","2,099.430","2;108,278" "32,145,146", 05 
5,Philadelphia city,Pennsylvania,"1,526,006","1,526,006","1,528,074","1,536,471" 
6,Phoenix city,Arizona,"1,445,632","1,445,656","1,448,531","1,469,471",,,, 
7y.San Antonio Glity,. Texas, "ly 327 407 "327,.606" "T1334 A431 "1 3597758", , ;3 
eSan Lege eity,California 1307 402" TL, S307, 406T VI S11iSL6r "1 3267 L179, yy 
9 .Dallas: Certy Texas ul 197 .0L6. U1 rlL907 ,816u .L120L1; 7 "1, 222229U ,yy 
10,San Jose city,California,"945,942","952,612","955,091","967,487",,,,; 


确实 挺 乱 的 ， 而 且 我 们 也 不 需要 那么 全 面 的 数据 。 于 是 我 在 自己 的 电子 表格 程序 
里 打开 这 个 CSV， 然 后 做 了 一 些 清 理工 作 ， 删 除了 不 需要 的 数据 列 。( 建 议 使 用 
LibreOffice Calc、Apple Numbers 或 Microsoft Excel) 。 而 且 ， 我 们 只 想得到 最 大 的 
50 个 城市 的 数据 ， 所 以 就 把 其 他 城市 的 数据 都 删 掉 了 。 再 导出 为 CSV,， 就 有 了 以 下 
数据 : 


rank,place,population 
1,New York city,8175133 
2,Los Angeles city,3792621 
3,Chicago city,2695598 
4,Houston city,2099451 
5,Philadelphia city,1526006 
6,Phoenix city,1445632 
7,San Antonio city,1327407 
8,San Diego city,1307402 
9,Dallas city,1197816 
10,San Jose city,945942 








这 些 都 是 有 用 信息 ， 但 要 把 它们 标注 到 地 图 上 ， 还 需要 每 个 城市 的 经 纬度 坐标 信息 。 
如 果 手 工 查找 ， 那 得 花 很 长 时 间 。 所 笠 ， 我 们 可 以 利用 一 些 现 成 的 地 理 编 码 服务 来 
提高 效率 。 地 理 编码 (geocoding) 服务 能 够 根据 地 名 查找 地 图 (实际 上 是 查找 数据 
库 )， 返 回 精确 的 经 纬度 坐标 。 说 “精确 ”可 能 有 点 伟大， 虽然 地 理 编 码 程序 会 尽 
力 确 保 这 一 点 ， 但 在 遇 到 有 歧义 的 时 候 也 免不了 会 返回 错误 的 数据 。 比 如 ， 要 查询 
Paris， 返 回 的 可 能 是 法 国 巴 黎 ， 而 不 是 德 克 萨 斯 州 帕 里 斯 的 信息 。 因 此 ， 在 根据 地 
理 编码 服务 返回 的 数据 标注 完 城市 后 ， 最 好 用 眼睛 测试 一 下 地 图 ， 再 手工 修改 一 遍 
那些 错误 的 坐标 。( 以 http://teczno.com/squares 作为 参 芳 。) 
































在 常用 的 地 理 编码 应 用 里 ， 我 把 这 些 地 名 粘贴 进去 ， 单 击 “开始 ”! 儿 分 钟 后 ， 就 
得 到 了 结果 ， 结 果 中 包含 更 多 逗号 分 隔 的 值 ， 其 中 就 有 纬度 /经度 信息 。 把 这 些 信 


息 导 入 电子 表格 程序 ， 再 保存 一 份 格式 统一 的 带 坐标 的 CSV 文件 : 


rank,place,population,1lat,1on 

1,New York city,8175133,40.71455,-74.007124 
2,Los Angeles city,3792621,34.05349,-118.245323 
3,Chicago city,2695598,45.37399,-92.888759 
4,Houston city,2099451,41.337462,-75.733627 
5,Philadelphia city,1526006,37.15477,-94.486114 
6,Phoenix city,1445632,32.46764,-85.000823 
7,San Antonio city,1327407,37.706576,-122.440612 
8,San Diego city,1307402,37.707815,-122.466624 
9,Dallas city,1197816,40.636,-91.168309 

10,San Jose city,945942,41.209716,-112.003047 





整个 过 程 比 想 象 的 要 简单 得 多 。 如 果 是 十 年 前 ， 我 们 为 此 可 能 得 花 上 好 儿 个 小 时 ， 
一 条 一 条 地 查询 ， 然 后 再 整理 好 数据 。 而 现在 呢 ， 复 制 加 粘贴 ， 根 本 不 用 动 什 么 脑 
子 ， 几 分 钟 就 搞定 了 。 相 信 读 者 知道 为 什么 在 线 地 图 这 么 火爆 了 。 


数据 准备 就 绪 ， 而 且 我 们 也 知道 怎么 加 载 它们 了 : 





d3.csv("us-cities.csv'", function(data) { 
// 加 载 完 数据 ， 执 行 一 些 操作 
Ds 


在 这 个 回调 函数 内 部 ， 可 以 用 代码 表达 怎么 用 新 创建 的 circle 元 素 代表 每 个 城市 。 
然后 ， 根 据 各 自 的 地 理 坐 标 ， 将 它们 定位 到 地 图 上 : 


svg.selectAll ("circle") 
.data (data) 
.enter () 
.append ("circle") 
attr("cx", function(d) { 
return projection([d.1lon, d.1lat]) [0]; 


} 
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:SEEEGST funetion (ad) { 
return projection([d.lon, d.1lat]) [1]; 

}) 

attr ("rr SY) 

.style ("fill", "yellow") 

"Style (opacity", (0.75)s 
以 上 代码 的 关键 是 通过 attr() 语句 设 定 cx 和 cy 值 。 没 错 ， 可 以 通过 a.1on 和 
d.1at 获得 原始 的 经 度 和 纬度 。 但 我 们 真正 需要 的 ， 则 是 在 屏幕 上 定位 这 些 圆 形 的 
xX/y 坐标 ， 而 不 是 地 理 坐 标 。 


因此 就 要 借助 projection () ， 它 本 质 上 是 一 个 二 维 比例 尺 方法 。 给 D3 的 比例 尺 
传 入 一 个 值 ， 它 会 返回 另 一 个 值 。 对 于 投影 而 言 ， 我 们 传人 两 个 数值 ， 返 回 两 个 数 
值 。( 投 影 和 简单 的 比例 尺 的 另 一 个 主要 区 别 是 后 台 计 算 ， 前 者 要 复杂 得 多 ， 后 者 只 
是 一 个 简单 的 归 一 化 映射 。) 

地 图 投影 接受 一 个 包含 两 个 值 的 数组 作为 输入 ， 经 度 在 前 ， 纬 度 在 后 (这 是 
GeoJSON 格式 规定 的 )。 然 后 ， 投 影 就 会 返回 一 个 包含 两 个 值 的 数组 ,分别 是 屏幕 
上 的 x/y 坐标 值 。 因 此 ， 设 定 cx 时 使 用 [0] 取得 第 一 个 值 ， 也 就 是 x 坐标 值 ， 设 定 
cy 时 使 用 [1] 取得 第 二 个 值 ， 也 就 是 y 坐标 值 。 明 白 了 吗 ? 


结果 就 是 图 12-6 所 示 的 带 城市 的 地 图 ， 太 好 了 ! 代码 请 参考 06_points.html。 









































图 12-6: 美国 最 大 的 50 个 城市 ， 在 地 图 上 用 可 爱 的 小 黄 点 表示 


不 过 ， 这 些 点 大 小 都 一 样 啊 ， 应 该 把 人 口 数据 反映 到 圆 形 大 小 上 。 为 此 ， 可 以 这 样 
引用 人 口 数据 : 





.attr("r", function(d) { 
return Math.sqrt (parseInt (d.population) * 0.00004); 


}) 
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这 里 先 取得 a.population， 把 它 传 给 parseInt () 实现 从 字符 串 到 整数 值 的 转换 ， 
再 随便 乘 一 个 小 数 降低 其 量 级 ， 最 后 得 到 其 平方 根 (把 面积 转换 为 半径 ) 。 代 码 参 见 


07_points_sized.html。 
如 图 12-7 所 示 ， 最 大 的 城市 突出 出 来 了 。 城 市 大 小 的 差异 很 明显 ， 这 种 情况 可 能 


适合 使 用 对 数 比 例 尺 ， 尤 其 是 在 包含 人 口 更 少 的 城市 的 情况 下 。 这 时 候 就 不 用 乘 以 
0.00004 了 ， 可 以 直接 使 用 自 定义 的 D3 比例 尺 函数 。( 作 为 一 个 练习 留 给 大 家 吧 。) 














图 12-7: 表示 城市 的 圆 点 面积 对 应 着 人 口 


这 个 例子 的 关键 在 于 ， 我 们 整合 了 两 个 不 同 的 数据 集 ， 把 它们 加 载 并 显示 在 了 地 图 
上 。( 如 果 算 上 地 理 编码 坐标 ， 一 共 就 是 三 个 数据 集 了 ! ) 


12.6 ”取得 和 解析 地 图 数据 


如 果 只 想 生 成 美国 的 地 图 ， 那 我 们 手 里 已 经 有 很 多 GeoJSON 数据 了 。 但 世界 之 大 ， 
可 能 还 有 很 多 地 区 需要 我 们 去 为 它 生 成 地 图 。 本 节 我 们 就 专门 讲 一 讲 怎么 去 查找 和 
解析 其 他 地 区 的 地 图 数据 。 最 终 目标 是 能 生成 像 us-states.json 一 样 的 GeoJSON 数 
据 ， 以 便 在 D3 中 使 用 。 

















12.6.1 查找 shapefile 文 件 

所 谓 的 shapefile， 是 在 线 地 图 和 可 视 化 流行 之 前 的 一 种 文件 。 这 种 文件 包含 着 
与 现在 的 GeoJSON 中 几乎 相同 的 数据 ， 比 如 地 理 区 域 的 边界 、 这 些 区 域 中 的 点 
等 等 。 只 不 过 格式 不 是 纯 文本 ， 因 此 很 难 用 代码 来 读 取 。shapefile 是 使 用 GIS 
(Geographic Information Systems， 地 理 信 息 系 统 ) 软件 的 地 理工 作者 、 测 绘 人 员 和 
科研 人 员 常 用 的 一 种 格式 。 如 果 你 能 接触 到 昂贵 的 GIS 软件 ， 那 么 对 shapefile 应 该 
不 会 陌生 。 但 这 种 人 毕竟 只 是 少数 ， 浏 览 器 不 可 能 去 兼容 这 种 格式 。 
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如 果 你 实在 找 不 到 合用 的 GeoJSON 文件 ， 可 以 试 着 找 一 找 shapefile 文件 。 政 府 
网 站 一 般 是 首选 目标 ， 特 别 是 某 些 国家 或 地 区 的 政府 网 站 。 以 下 是 我 最 常用 的 两 
个 资源 。 


。 Natural Earth (http:Wwww.naturalearthdata.comy) 
集合 了 公共 域 中 的 大 量 地 理 数据 ， 包 括 文化 、 政 治 和 自然 特征 信息 。 绘 制 国家 地 
图 涉及 政治 敏感 问题 ，Natural Earth 详细 说 明了 它们 的 设计 原则 。 

。 美国 人 口 普查 局 (http:Wwww.census.gov/geo/www/cob/cbf state.html) 
可 以 找到 美国 每 个 州 的 边界 数据 ， 还 包含 县 、 公 路 、 水 文 等 特征 信息 ， 非 常 丰 
富 ， 都 在 公共 域 。 


12.6.2 ”选择 解析 度 


下 载 之 前 ， 要 确定 数据 的 解析 度 (resolution)。 所 有 shapefile 都 是 矢量 数据 (而 不 
是 位 图 )， 因 此 解析 度 的 意思 不 是 像素 ， 而 是 地 理 信息 的 详尽 程度 或 粒度 。 


Natural Earth 的 数据 集 分 三 种 解析 度 ， 包 括 最 详尽 的 和 不 怎么 详尽 的 : 








。 1:10 000 000 
。 1:50 000 000 
。 1:110 000 000 





也 就 是 说 ， 在 最 高 解析 度 的 数据 中 ，1 个 单位 对 应 现实 世界 中 的 1000 万 个 这 样 的 单 
位 。 或 者 反 过 来 说 ， 现 实 世界 中 的 1000 万 个 单位 会 简化 为 1 个 。 因 此，1000 万 英 
寸 (254 公里 ) 在 这 个 数据 中 表示 为 1 英寸 。 


这 种 解析 度 可 以 表达 为 更 简单 的 形式 : 


。 1:1000 万 
。 1:5000 万 
。 1:11 000 万 


对 于 不 太 详 尽 (“缩小 后 ”) 的 地 图 ，1:11 000 万 的 解析 度 是 可 以 胜任 的 。 如 果 想 
显示 每 个 州 的 详细 轮廓 ， 则 1:1000 万 效果 更 好 。 如 果 想 在 地 图 上 显示 一 个 非常 小 
(“放大 后 ”) 的 区 域 ， 例 如 特定 的 城市 甚至 街区 ， 那 就 得 去 找 更 高 解析 度 的 数据 。 
(看 看 本 州 或 本 市 政府 的 网 站 。) 


不 同 的 数据 源 提供 的 数据 解析 度 也 可 能 不 同 。 美 国人 口 普查 局 的 很 多 shapefile 文件 
对 应 于 下 列 三 种 比例 尺 : 
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。 1:500 000 (1:50 万 ) 
。 1:5 000 000 (1:500 万 ) 
。 1:20 000 000 (1:2000 万 ) 


选 好 解析 度 后 下 载 文件 ， 得 到 的 一 般 是 ZIP 压缩 文件 ， 包 含 其 他 一 些 文件 。 比 如 ， 
我 从 Natural Earth 上 可 以 下 载 一 个 1:11 000 万 ( 低 解 析 度 ) 的 海洋 文件 : http:// 


www.naturalearthdata.com/downloads/110m-physical-vectors/1 10m-ocean/。 


解压 缩 后 ， 可 以 得 到 如 下 儿 个 文件 : 


ne_110m ocean.dbf 

ne_110m ocean.prj 

ne 11l10m ocean.README.html 

ne_ 110m ocean.shp 

ne_110m ocean.shx 

ne_110m ocean.VERSION.txt 
这 些 扩展 名 乱七八糟 的 都 是 什么 啊 ?! 别 急 ， 我 们 只 关心 以 .shp (shapefile) 结尾 的 
那个 文件 ， 但 其 他 文件 暂时 也 不 用 删 掉 。 


12.6.3 简化 数据 文件 

理想 情况 下 ， 你 可 能 会 找到 解析 度 正 合适 的 shapefile 文件 。 可 是 ， 如 果 你 只 能 找到 
超 高 解析 度 的 文件 ， 比 如 1:10 万 的 ， 怎 么 办 呢 ? 这 种 文件 可 能 会 非常 大 。 而 作为 
JavaScript 程序 员 ， 你 可 能 又 非常 在 乎 效率 ， 还 记得 吗 ? 不 要 向 浏览 器 发 送 几 兆 的 
地 理 数据 。 


好 在 ， 我 们 可 以 简化 这 些 文件 ， 也 就 是 把 它们 转换 成 低 解 析 度 的 版 本 。 简 化 数据 
的 过 程 在 Mike Bostock 的 这 篇 文章 里 ， 被 非常 唯美 地 展示 了 出 来 : http://bost.ocks. 


org/mike/simplify/。 





Matt Bloch 开发 的 MapShaper (http://mapshaper.ore/) 是 一 个 非常 好 用 的 简化 数据 
的 工具 。 你 可 以 上 传 shapefile 文件 ， 然 后 拖 动 滑动 条 上 的 滑 块 来 选择 解析 度 。 


使 用 MapShaper 时 ， 以 “Shapefile - polygons” 作 为 导出 选项 。 这 样 可 以 同时 生成 
一 个 .shp 文件 和 一 个 .shx 文件 。 下 载 这 两 个 文件 ， 把 它们 重 命名 为 与 原来 的 .shp 
和 .shx 文件 一 致 的 名 字 。 然 后 在 把 它们 转换 到 GeoJSON 格式 前 ， 备 份 一 下 原来 
的 .dbf 文件 ， 并 将 它 与 简化 后 的 shapefile 文件 放 在 同一 个 文件 夹 里 。 这 一 步 很 重 
要 ， 可 以 保证 不 丢失 保存 在 .dbf 中 的 元 数据 信息 ， 比 如 县 ID 或 其 他 路 径 标识 符 。 





另外 ， 还 可 以 考虑 使 用 Mike Migurski 的 Bloch (https:Wgithub.com/migurski/Bloch ) ， 
这 是 对 Matt Bloch 简化 算法 的 一 个 Python 实现 ， 或 者 d3.simplify 插件 (Mike 前 
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面 的 演示 示例 中 使 用 的 就 是 这 个 插件 )。 但 愿 有 一 天 可 以 使 用 JavaScript 直接 实现 
简化 ， 然 后 导出 为 可 以 在 项 目 中 使 用 的 JSON 格式 。 这 类 工具 发 展 很 快 ， 因 此 请 
大 家 平时 多 关注 一 下 ! (实际 上 ， 在 我 写 到 这 一 段 时 ，Bostock 就 发 布 了 一 个 用 
于 几何 简化 的 新 项 目 TopoJSON (https://github.com/mbostock/topojson) 的 演示 
(http://bl.ocks.org/4090870)。 你 说 这 个 世界 变化 有 多 快 吧 ! 了 臣 怕 在 你 看 到 这 一 段 文 
字 时 ， 这 个 TopoJSON 命令 行 工 具 已 经 可 以 成 为 你 的 得 力 工 具 了 。 这 个 工具 的 功 
能 包括 加 载 shapefile 文件 、 执 行 简化 并 将 数据 转换 为 JSON 格式 。 跟 我 们 期 待 的 
一 样 ，TopoJSON 考虑 到 了 D3， 虽 然 它 输出 新 的 TopoJSON 格式 ， 但 这 种 格式 与 
GeoJSON 类 似 ， 而 且 效率 更 高 。) 











12.6.4 转换 为 GeoJSON 

如 果 没 有 合适 的 软件 ， 那 么 这 一 步 会 麻烦 一 些 。 我 们 最 终 的 目的 是 要 使 用 一 个 叫 
ogr2ogr 的 终端 命令 ， 可 以 在 Mac、Unix 和 Windows 系统 中 使 用 。 主 要 问题 是 
ogr2ogr 依赖 一 些 框架 、 库 之 类 的 东西 ， 不 把 它们 都 安装 好 ， 就 没 办 法 用 。 


关于 安装 这 些 依赖 的 细 闻 ， 我 们 就 不 介绍 了 ， 但 本 布 会 告诉 你 大 致 怎么 做 。 








首先 ， 要 下 载 Geospatial Data Abstraction Library， 即 GDAL (http:Wwww.gdal.org/) 。 
这 个 程序 包 里 包含 Ogr20gr。 


还 要 下 载 GEOS (http:Wtrac.osgeo.org/geos/) ， 即 Geometry Engine, Open Source。 


然后 在 Windows 或 Unix/Linux 计算 机 中 ， 下载 源 代码 ， 然 后 输入 好 玩 的 puila、 
make, 以 及 众多 其 他 安装 命令 。 


实际 的 安装 命令 我 不 记得 了 ， 但 大 致 过 程 就 是 这 样 。( 郑 重地 跟 大 家 说 一 声 ， 如 果 这 
一 步 你 过 不 了 ， 可 以 参考 O'Reilly 出 版 的 相关 图 书 ， 根 据 里 面 的 介绍 下 载 和 安装 这 
种 软件 包 。) 


如 果 你 使 用 的 是 Mac， 那 很 可 能 已 经 安装 了 Xcode 和 Homebrew。 那 么 ， 只 要 在 终 
端 中 简单 地 输入 brew install gdal， 就 行 了 。( 如 果 这 两 个 工具 有 一 个 你 没 安 
装 ， 建 议 安装 上 。 这 两 个 工具 都 是 免费 的 ， 但 安装 可 能 得 花 点 时 间 。Xcode 本 身 很 
大 ， 要 从 App Store 下 载 。 安 装 了 Xcode 之 后 ， 至 少 从 理论 讲 ， 只 要 在 终端 里 使 用 
一 个 简单 的 命令 就 能 安装 Homebrew 了。 根据 我 的 经 验 ， 可 能 要 解决 一 些小 问题 才 
能 最 终 安 装 好 。) 


对 于 使 用 Mac 但 没有 安装 Xcode 或 Homebrew 用 户 来 说 ， 还 可 以 选择 一 个 预 编译 
的 GUI 安装 程序 ， 这 个 程序 会 安装 GDAL、GEOS 以 及 其 他 一 些 你 不 用 知道 是 干 
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什么 的 工具 。GDAL Complete 包 的 最 新 版 地 址 在 这 里 : http://www.kyngchaos.com/ 
software/frameworks。 仔 细 看 一 看 GDAL ReadMe 文件 吧 。 安 装 后 ， 还 不 能 在 终 
端 窗口 里 使 用 ogr2ogr。 还 得 把 GDAL 程序 放 到 这 程序 的 路 人 径 中 。 最 简单 的 办 法 
是 打开 终端 窗口 ， 输 入 nano .bash profile, 然后 把 export PATH=/Library/ 
Frameworks/GDAL .framework/Programs :SPAT 粘贴 进去 ， 再 按 Control-X 和 
Control-y 保存 ， 再 输入 exit 退出 会 话 。 打 开 一 个 新 终端 窗口 ， 输 入 ogr2ogr 就 能 
看 到 它 可 以 使 用 了 。 


无 论 你 使 用 什么 操作 系统 ， 安 装 了 这 些 工 具 后 ， 打 开 终 端 窗口 ， 进 入 保存 所 有 
shapefile 文件 的 文件 夹 (比如 cq ~/ocean shapes/)， 然 后 输入 如 下 命令 : 


Ogr20gr -f "GeoJSON" output.json filename.shp 


这 是 告诉 ogr2ogr 取得 扩展 名 为 .shp 的 filename 文件 ， 把 它 转换 成 GeoJSON ， 然 
后 保存 为 名 为 output.json 的 文件 。 


以 我 下 载 的 海洋 文件 为 例 ， 使 用 ogr2ogr 的 命令 如 下 : 


Ogr20gr -f "GeoJSON" output.json ne 110m ocean.shp 


输入 这 些 命令 , 但 愿 你 什么 也 看 不 到 。 


这 就 完了 啊 ? ! 我 知道 ， 花 几 个 小 时 间 才 和 弄 好 了 命令 行 工具 ， 你 希望 结尾 怎么 也 得 
辉煌 一 些 吧 ， 就 像 你 在 《超级 马里 奥 兄 弟 3》 里 救 下 公主 一 样 。( 甚 实 我 始终 没 玩 到 





那 一 关 ， 但 我 想象 着 那 一 刻 肯 定 非 常 激动 人 心 。) 


可 是 没有 ， 你 最 好 乞求 什么 也 不 会 发 生 。 当 然 ， 同 一 个 文件 夹 里 最 好 还 会 多 一 个 叫 
output.json 的 文件 。 这 就 是 我 得 到 的 结果 : 


{ 


"type": "FeatureCollection", 

"features": [ { "type": "Feature", "properties": 
{ "scalerank": 0, "featurecla": "Ocean" }, 
"geometry": { "type": "Polygon", "coordinates": 


[ [ [ 49.110290527343778, 41.28228759765625 ]， 

[ 48.584472656250085, 41.80889892578125 ]， 
[ 47.492492675781335, 42.9866943359375 ]， 

[ 47.590881347656278, 43.660278320312528 ]， 
[ 46.682128906250028, 44.609313964843807 ]， 

[ 47.675903320312585, 45.641479492187557 ]， 
[ 48.645507812500085, 45.806274414062557 ] 


嘿 ， 最 后 这 个 结果 看 起 来 很 面 熟 啊 ! 
现在 ， 你 就 可 以 高 高 兴 兴 地 把 新 生成 的 GeoJSON 复制 到 D3 文件 夹 里 了 。 我 把 它 重 
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命名 为 oceans.json， 复 制 了 之 前 的 一 个 HTML 文档 ， 然 后 在 D3 代码 里 简单 地 把 对 
us-states.json 的 引用 改 为 引用 oceans.json， 就 得 到 了 图 12-8 所 示 的 结果 。 

















图 12-8: GeoJSON 数据 可 视 化 ， 吃 ， 这 是 地 球 上 的 海洋 ? 
老兄 ， 这 是 什么 东西 ?! 不 管 是 什么 ， 你 先 看 看 08_oceans.html。 


匆忙 之 间 ， 我 忘 了 更 新 投影 了 ! 再 改动 一 小 点 ， 把 albersUsa 改 成 mercator ( 参 
见 图 12-9)。 

















图 12-9: GeoJSON 数据 可 视 化 ， 这 才 是 投影 正确 的 全 球 海域 图 嘛 


请 大 家 参考 09_mercator.html， 其 中 包含 了 海洋 的 GeoJSON 路 径 ， 以 及 下 载 、 解 析 
和 可 视 化 的 所 有 代码 。 
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导出 文件 





有 了 时候 需要 把 图 表 用 在 浏览 器 之 外 的 环境 下 ， 比 如 你 接 到 TED 的 邀请 去 做 一 次 演 
讲 ， 或 者 在 MoMA (纽约 现代 艺术 博物 馆 ) 办 自己 的 第 一 次 个 展 。 

本 章 介 绍 三 种 把 D3 生成 的 图 表 导 出 为 其 他 格式 的 简单 方法 。D3 并 没有 内 置 的 “ 导 
出 ”函数 (有些 人 自己 写 过 )， 因 此 下 面 只 是 几 种 适用 于 任何 在 浏览 器 中 生成 的 
SVG 图 形 的 技术 。 


13.1 导出 位 图 

导出 位 图 最 简单 的 方法 就 是 截屏 ， 当 然 图 片 品质 也 最 低 。 根 据 你 使 用 的 操作 系统 ， 
可 以 在 PC 中 按键 盘 上 的 Print Screen 键 ， 或 者 在 Mac 上 按 中 -Shift-4 ( 拖 动 十 字 光 
标 选 择 要 截取 的 区 域 ， 松 开 鼠 标 ， 就 可 以 在 桌面 上 看 到 生成 的 PNG 图 片 ) 。 


13-1 就 是 我 用 上 述 方法 截取 的 位 图 图 片 。 





























图 13-1: 一 张 PNG 截图 
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这 种 方法 简单 快捷 ， 但 位 图 图 片 的 分 辩 率 只 有 屏幕 的 分 辩 率 那么 大 。 因 此 ， 这 张 图 
ee E 放 得 太 大 ， 打 印 出 来 也 不 会 很 清晰 。 这 种 低 分 辩 率 图 片 一 般 只 适合 屏幕 显 
。( 当 然 ， 如 果 你 有 一 台 像 素 密 度 超 高 的 显示 器 ， 那 另 当 别论 。) 





13.2 ”导出 PDF 


PDF， 即 Portable Document Format (便携 文档 格式 ) 的 文档 可 以 包含 矢量 图 ， 包 括 
SVG 图 形 。 因 此 ， 导 出 到 PDF 可 以 迅速 得 到 一 个 可 伸缩 的 图 表 (参见 图 13-2 ) 。 





























图 13-2: PDF 可 以 保持 原始 的 矢量 数据 ， 因 而 很 清晰 


wa 上 打开 浏览 器 ， 选 择 “文件 > 打印 ”。 然 后 找到 PDF 菜单 ， 选 择 “ 保 存 为 
。 在 Windows 或 Linux 上 ， 可 能 需要 安装 第 三 方 插件 才能 有 打印 到 PDF 的 功 
E。 i doPDF for Windows 可 以 使 用 ， 而 且 免 费 。) 
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13.3 导出 SVG 


既然 我 们 使 用 D3 生成 了 SVG 格式 的 图 形 ， 那 为 什么 不 把 它 直接 保存 成 SVG 格式 
呢 ? 这 样 就 跟 导 出 PDF 格式 没有 什么 差别 了 ， 既 可 以 保持 原始 的 矢量 数据 ， 从 而 
确保 可 以 伸缩 ， 又 能 把 导出 的 文件 导入 Tllustrator 或 其 他 SVG 编辑 器 ， 然 后 进行 调 
整 。( 在 某 种 程度 上 ， 这 对 于 PDF 文件 也 是 可 行 的 ， 但 要 看 使 用 的 是 什么 PDF 生成 
器 ， 有 些 生 成 器 生成 的 PDF 会 以 意 想 不 到 的 方式 对 元 素 进 行 分 组 和 分 层 。) 


最 简单 的 办 法 就 是 从 DOM 中 直接 复制 SVG 代码 (参见 图 13-3)。 首 先 ， 检查 SVG 
元 素 ， 在 Web 检查 器 中 点 击 该 元 素 ， 然 后 选择 “复制 ”或 “复制 为 HTML 。 








<IDOCTYPE htmt> 
v<html lang="en"> 
p<head>..</head> 
TY<body> 
p<script type="text/javascript">-.</script> 
p<svg width="500" height="300">.</svg> R 





<svg 
</body> 
</html> 











图 13-3; 从 DOM 中 复制 D3 生成 的 SVG 代码 


切换 到 文本 编辑 器 ， 把 复制 的 代码 粘贴 到 一 个 新 文件 中 ， 如 图 13-4 所 示 。 
然后 将 新 文件 保存 为 something.svg。 用 Illustrator (或 其 他 SVG 编辑 器 ) 打开 这 个 
文件 ， 如 图 13-5 所 示 。 
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©3089, I Untitled 一 Edited 











<svg width="500" height="300"><Line style="stroke: ; #cccccc; stroke-width: px " x1="273.61343963278165" 
y1="182.18356861019123" x2="225.9949218929272" y2="193.19411138152313"></line><line style="stroke: #cccccc; 
stroke-width: 1px; " x1="273.61343963278165" y1="182.18356861019123" x2="283.67841007682593" 
y2="130.92132168819515"></line><line style="stroke: #cccccc; stroke-width; 1px; " x1="273.61343963278165" 
y1="182.18356861019123" x2="317.3930362372182" y2="153.88579101782315"></line><line style="stroke: #cccccc; 
stroke-width: 1px; " x1="273.61343963278165" y1="182.18356861019123" x2="317.0952484339132" 
y2="284.50954786852034"></line><line style="stroke: #cccccc; stroke-width: 1px; " x1="225.9949210929272" 
y1="193.19411138152313" x2="234.089871618694763" y2="140.14431983959984"></line><line style="stroke: #cccccc; 
stroke-width: 1px; " x1="283.67041007682593" y1="130.92132168819515" x2="234.89871618694763" 

y2="140. 14431983959984"></line><line style="stroke: #cccccc; stroke-width: 1px; " x1="283.67841007682593" 
y1="130.92132168819515" x2="234.09871618694763" y2="140.14431983959984"></line><line style="stroke: #cccccc; 
stroke-width: 1px; " x1="317.3938362372182" y1="153.88579101782315" x2="317.08952484339132" 
y2="204.50954786852034"></line><line style="stroke: #cccccc; stroke-width: 1px; " x1="234.89871618694763" 
y1="140.14431983959984" x2="211.9884062809621965" y2="93.68253265425357"></line><line style="stroke: #cccccc; 
stroke-width: 1px; " x1="234.09871618694763" y1="140.14431983959984" x2="261.5553748108089" 
y2="95.30356891617821"></line><line style="stroke: #cccccc; stroke-width: lpx; " x1="182.184808815364342" 
y1="182.62850971444286" x2="178.34544918879595" y2="131.49617579462605"></line><line style="stroke: #cccccc; 
stroke-width: 1px; " x1="178.34544918879595" y1="131.49617579462605" x2="211.98840209621965" 
y2="93.60253265425357"></line><line style="stroke: #cccccc; stroke-width: 1px; " xl='"211.98040209621965" 
y1="93.60253265425357" x2="261.5553748108089" y2="95.30356891617821"></line><circle r="10" style="fill: 
#1f77b4; " cx="273.61343963278165" cy="182.18356861019123"></circle><circle r="10" style="fill: #ff7fQe; " 
CXx="225.9949210929272" cy="193.19411138152313"></circle><circle r="10" style="fill: #2ca02c; " 
Cx="283.67041007682593" cy="130.92132168819515"></circle><circle r="10" style="fill: #d62728; 
"317.3930362372182" cy="153.88579101782315"></circle><circle 
C 17.0952484339132" 204. 50954786852034"></circle><circle r="10" style="fill: 
Cx="234.09871618694763" cy="140.144319839599864"></circle><circle r="10" style="fill: #e377c2; 村 
cx='"182.18480815364342" cy='"182.62856971444286'"></circte><circte r='"10" style="fill: #7f7f7f; " 
CXx="178.34544918879595" cy="131.49617579462685"></circle><circle r='"10" style="fill: #bcbd22; ， - 
Cx='"211.98040209621965" cy="93.60253265425357"></circle><circle r="10" style="fill: #17becf; 
Cx="261.5553748108089" cy="95.30356891617821"></circle></svg3| 












13-4: 把 SVG 代码 粘贴 到 新 文件 中 














13-5: 在 Mustrator 中 打开 导出 的 SVG 文件 
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如 图 13-6 所 示 ， 所 有 元 素 可 都 可 以 单独 选中 并 编辑 。 在 图 13-7 所 示 的 版 本 中 ， 我 
采用 图 弗 特 〈Tufte) 增强 技术 ,添加 了 可 变 权 重 的 线条 ， 而 且 为 了 让 人 心态 平和 地 
看 这 张 图 ， 还 添加 了 中 性 的 谈 紫 色 。(〈 声 明 一 下 ， 我 是 开玩笑 的 ， 我 和 图 弗 特 都 不 同 
意 这 种 做 法 。) 





一 ,ted_breakthrough_moment.svg @ 150% (RGB/Preview) 














13-6: 选择 了 一 个 SVG 元 素 
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图 3-17: 我 的 开创 性 设计 ， 通 过 手工 调整 ， 开 创 性 更 加 鲜明 


好 了 ,把 SVG 图 形 导出 到 浏览 器 之 外 的 几 种 方式 讲 完 了 。 可 以 把 导出 的 图 形 用 于 文 
档 、 演 示 、 打 印 或 屏幕 显示 。 
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附录 人 


扩展 阅读 





现在 你 是 个 有 经 验 的 人 啦 。 本 书 介 绍 了 很 多 关于 D3 的 基本 概念 ， 而 你 对 它 的 基本 
用 法 和 常见 技术 也 有 了 较 好 的 理解 。 如 果 说 你 已 经 学 到 了 什么 ， 那 我 希望 你 知道 任 
何 一 个 任务 都 有 儿 种 (或 者 儿 十 种 ， 几 百 种 ) 解决 方案 ， 而 这 正 是 编程 的 乐趣 所 在 ， 
对 吧 ? 本 书展 示 的 方式 ， 都 是 最 简单 和 最 直观 的 方式 ， 而 且 理解 起 来 也 最 容易 ， 至 
少 对 我 而 言 是 这 样 。 可 是 ， 也 许 还 有 其 他 更 好 方法 来 解决 本 书 中 提出 的 各 种 问题 。 
所 谓 “ 更 好 "， 意 思 是 “计算 效率 更 高 ”或 “最 适合 你 或 你 的 工作 方式 ”。 我 倾向 
于 后 一 种 定义 。 编 程 就 像 解 谜 题 ， 你 必须 自己 想 办 法 把 计算 机 该 干什么 怎么 干 告 诉 
它 一 一 用 一 种 你 作为 人 类 同样 能 理解 的 语言 。 


D3 是 一 个 强大 的 工具 ， 我 们 只 是 对 它 有 了 一 个 大 致 的 了 解 。 只 有 真正 做 儿 个 自己 的 
可 视 化 项 目 ， 才 会 发 现 其 他 有 用 的 方法 和 各 种 前 所 未 知 的 快捷 方式 。 本 书 还 没有 讲 
到 的 东西 很 多 ， 比 如 D3 用 于 处 理 日 期 和 时 间 值 、 动 态 选择 和 计算 颜色 、 快 捷 操 作 
数组 ， 以 及 客户 端 数据 处 理 必 需 的 各 种 内 置 方法 。 关 于 D3， 要 学 的 东西 还 有 很 多 。 
但 我 已 经 把 最 核心 的 概念 讲 完 了 ， 剩 下 的 就 得 靠 你 自己 去 探索 了 。 


好 ， 那 接 下 来 怎么 探索 ?” 本 附录 给 出 了 一 些 有 用 的 资源 ， 或 许可 以 满足 你 的 需求 。 
不 要 忘 了 ，D3 本 身 仍 在 不 断 改 进 ， 而 这 些 资源 也 一 样 。 在 你 阅读 到 这 里 的 时 候 ， 一 
些 这 里 没有 提 到 的 新 网 站 或 教程 也 许 又 出 现 了 。 正 因为 如 此 ， 我 也 不 推荐 你 只 是 一 
味 地 看 教程 ， 而 是 要 深入 D3 的 社区 。 加 入 它 的 Google Group， 在 Twitter 上 关注 一 
批 人 ， 时 刻 注 意 最 新 动向 。 有 问题 就 找 人 讨论 讨论 ， 结 交 几 位 数据 可 视 化 方面 的 同 
好 。 如 果 当 地 还 没有 D3 的 数据 可 视 化 小 组 ， 你 自己 创办 一 个 。 总 之 ， 只 有 多 向 别 
人 学 习 ， 自 己 才 能 快速 提高 。 
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管 怎么 说 ， 学 习 完 这 本 书 ，( 不 管 愿 不 愿意 ) 你 已 经 算是 一 位 D3 社区 的 成 员 啦 ， 欢 迎 ! 








A.1 图 书 


Getting Starting with D3， 作 者 Mike Dewar (O’Reilly，2012) 


是 的 ， 在 本 书写 作 时 ， 市面 上 只 有 一 本 关于 D3 的 书 。Mike Dewar 这 本 书 涵盖 了 一 


些 








高 级 主题 ， 也 包含 基于 纽约 市 交通 系统 的 一 些 真 实数 据 的 示例 。( 有 意思 ! ) 


A.2 网 站 


d3jS.org 
学 习 D3 一 切 的 起 点 。 


github.com/mbostock/d3/wiki/Gallery 
D3 的 代码 库 ， 包 含 数 以 百 计 的 示例 。 把 你 作品 也 加 进去 ! 


bl.ocks.org/mbostock 
例子 更 多 ， 而 且 都 是 Mike Bostock 亲手 编写 的 ， 每 一 个 都 反映 了 D3 的 一 项 功能 。 


github.com/mbostock/d3/wiki/API-Reference 
D3 API 参考 ， 包 括 所 有 方法 和 参数 的 详细 说 明 。 


stackoverflow.com/questions/tagged/d3.js 


遇 到 什么 难题 的 时 候 ， 可 以 在 StackOverflow 上 用 d3.js 标签 提 个 问 。 


groups.google.com/forum/?fromgroups#!forum/d3-js 
鱼龙混杂 的 D3 Google Group。 在 这 里 可 以 看 到 最 新 的 项 目 和 进展 。( 技 术 问 题 一 
定 到 StackOverflow 上 问 。) 


bl.ocks.org 

用 于 发 表 托 管 在 GitHub Gist 中 的 代码 ， 作 者 是 Mike Bostock。 非 常 适合 快速 与 
他 人 分 享 你 的 代码 ， 比 如 在 StackOverflow 上 寻求 帮助 的 时 候 ， 或 者 显摆 你 在 
Google Group 上 挖 到 的 新 玩 艺 儿 的 时 候 ， 都 可 以 用 到 它 。 





blog.visual.ly/creating-animations-and-transitions-with-d3-]js/ 
Jér6me Cukier 写 的 一 个 关于 使 用 D3 来 创建 动画 和 过 渡 效 果 的 教程 ， 极 其 精彩 ， 
有 很 多 当场 可 交互 的 例子 。 





d3noob.org 
新 的 介绍 D3 技巧 和 经 验 的 资源 网 站 ， 不 错 。 
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tributary.io 


用 于 试验 D3 代码 的 一 个 实时 编码 环境 ， 作 者 是 Ian Johnson。 


D3 Plug-ins (https://github.com/d3/d3-plugins) 
包含 扩展 D3 功能 的 所 有 官方 插件 ， 以 备 不 时 之 需 。 





A.3 Twitter 


Twitter 是 发 现 新 项 目 和 D3 进展 情况 的 好 地 方 。 下 面 给 出 一 些 值得 关注 的 人 ,但 肯 
定 会 遗漏 一 些 同样 值得 关注 的 账号 。 


@mbostock 
Mike Bostock， 了 解 D3 的 进展 和 《纽约 时 报 》 新 的 可 视 化 项 目 。 


@jasondavies 


Jason Davies， 了 解 地 理 和 数学 映射 的 各 种 实验 方法 。 





@d3visualization 


Christophe Viau， 了 解 D3 世界 的 各 种 更 新 。 


@enjalot 
Ian Johnson， 了 解 新 编码 工作 和 技术 ， 还 有 视频 教程 。 


@syntagmatic 
Kai Chang， 了 解 非常 多 的 D3 设计 方法 ， 难 以 计数 。 





@jcukier 
Jér6me Cukier， 了 解 极 具 创 造 性 的 可 视 化 项 目 ， 还 有 关于 流程 每 一 步 的 关键 提示 。 


@darkgreener 

Anna Powell-Smith， 了 人 解 探索 个 人 数据 的 交互 可 视 化 项 目 ， 非 常 漂亮 。 
@vlandham 

Jim Vallandingham， 了 解 做 项 目 过 程 中 的 注意 事项 ， 还 有 不 错 的 教程 。 


@alignedleft 
Scott Murray， 了 解 本 书 勘误 、 更 新 和 修订 ， 以 及 未 来 的 数据 驱动 的 项 目 。 


我 觉得 大 多 数 该 关注 的 男 同 胞 都 在 这 里 头 了 。 在 写作 本 书 时 ，D3 用 户 和 贡献 者 社区 
的 主要 成 员 好 像 都 是 男性 。 和 希望 将 来 这 本 书 出 新 版 的 时 候 ， 这 个 列表 可 以 更 丰富 多 


彩 一 些 。 
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KA 
作者 简介 
Scott Murray 是 一 位 编码 艺术 家 ， 他 的 工作 是 编写 代码 来 创建 可 视 化 的 数据 图 表 及 
其 他 交互 式 作 品 。 他 的 作品 涉及 交互 设计 、 系 统 设 计 和 生成 艺术 。 
Scott 是 旧金山 大 学 助理 教授 ， 主 要 讲授 数据 可 视 化 和 交互 设计 。 他 是 Processing 
(processing.org) 的 贡献 者 ， 也 在 培训 班 上 讲 创 造 性 编码 。 
Scott 拥有 瓦 萨 学 院 的 文学 学 士 学 位 、 马 了 萨 诸 塞 州 艺术 与 设计 学 院 动态 媒体 研究 所 美 
术 硕 士 学 位 。 他 的 个 人 作品 展示 站 点 是 alignedleft.com 。 


封面 说 明 
本 书 封面 上 的 动物 是 长 尾 山 誉 ， 也 叫 从 山 省 ( 银 喉 长 尾 山 汰 )。 丛 山 逢 是 欧洲 和 亚洲 
各 地 常见 的 一 种 乌 类 ， 其 中 长 尾 的 山 稚 头 部 为 纯 白色 。 


这 种 鸟 以 其 体型 小 巧 而 闻名 ， 算 上 尾巴 也 只 有 大 约 13~15 厘米 长 。 长 尾 山 汰 的 史 
短 而 粗 ， 与 其 修长 的 尾巴 相映 成 趣 。 雌 性 和 雄性 长 尾 山 稚 都 会 0 
前 全 身 脱 一 次 毛 ， 性 别 难 辨 。 成 年 山 誉 的 羽毛 主要 是 黑色 和 和 白色， 间 杂 一 些 灰 色 和 
粉色 。 


从 山 件 栖息 在 落叶 林 和 混合 林 中 ， 喜 食 虫 卵 以 及 飞 蛾 和 蝴蝶 的 幼虫 ， 喜欢 橡树 、 白 
蜡 树 以 及 无 花 果 树 。 一 般 把 集 筑 在 距离 地 面 较 近 的 灌木 从 。 


























Data Analysis 





数据 可 视 化 实战 : 使 用 D3 设计 交互 式 图 表 

你 手头 有 一 些 数据 ， 想 做 成 漂亮 的 图 表 放 到 网 站 上 ? 好 主意 ， 通 
过 浏览 器 来 跨 平台 实现 数据 可 视 化 是 正确 的 选择 。 什 么 ， 你 还 想 
让 图 表 能 够 响应 用 户 操 作 ? 没 问 题 ， 交 互 式 图 表 比 静态 图 片 更 能 
吸引 人 去 探究 本 源 。 好 啦 ， 要 生成 通过 浏览 器 展示 的 动态 图 表 ， 
首选 目前 最 热门 的 Web 数 据 可 视 化 库 一 一 D3。 

这 本 书 很 有 意思 ， 而 且 对 读者 要 求 不 高 。 不 需要 知道 什么 是 数据 
可 视 化 ， 也 不 用 有 太 多 Web 开 发 背景 就 能 看 懂 它 。 不 信 ? 翻 一 翻 就 
知道 这 是 一 本 既 好 玩 又 实用 的 动手 指南 啦 ! 看 完 这 本 书 你 会 怎么 
样 呢 ? 


掌握 必要 的 HTML、CSS、JavaScript 和 SVG 基础 知识 ; 

学 会 基于 数据 在 网 页 里 生成 元 素 和 为 它们 设置 样式 的 技巧 ， 

能 够 生成 条 形 图 、 散 点 图 、 饼 图 、 堆 又 条 形 图 和 力 导 向 图 ; 

加 使 用 平滑 的 过 渡 动 画 来 展示 数据 的 变化 ; 

田 赋予 图 表 动 态 交 互 能 力 ， 响 应 用 户 从 不 同 角度 探索 数据 的 请 
求 ; 

加 收集 数据 和 创建 自 定 义 的 地 图 ; 

加 另外 ， 本 书 100 多 个 代码 示例 都 可 以 在 线 浏 览 ! 


Strata 


Making Data Work 


Strata 是 新 兴 的 人 、 工 具 和 技术 的 生态 系统 ， 
它 使 用 海量 数据 来 支持 智能 化 决策 。 





“ 难 懂 的 技术 细节 到 了 作者 


Scott Murray 的 笔下 ， 三 言 两 
语 就 讲 得 清 清楚 楚 。 假 如 你 早 
就 想 探索 基于 Web 标 准 来 实现 
动态 的 数据 可 视 化 一 一 就 算 没 
多 少 编程 经 验 ， 这 本 书 都 是 你 
最 合适 的 选择 ! ” 

Mike Bostock 
最 有 潜力 的 Web 数 据 
可 视 化 库 D3 的 创造 者 








Scott Murray 

编码 艺术 家 ， 旧 金山 大 学 
助理 教授 ， 主 要 讲授 数据 
可 视 化 和 交互 设计 。 他 是 
Processing (processing.org) 
的 贡献 者 ， 个 人 作品 站 点 是 


alignedleft.com 。 
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欢迎 加 入 


图 灵 社 区 


电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 ， 在 许多 出 版 界 同行 还 在 犹 驳 信 笋 的 时 候 ， 图 灵 社 区 已 经 
采取 实际 行动 拥抱 这 个 出 版 业 巨 变 。 相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 
不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 〈 即 使 有 的 书 纸 质 版 是 黑白 印 
刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 
交 稿 、 编 辑 网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 
“敏捷 出 版 ”， 它 可 以 让 读者 以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 
以 往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 
交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 的 质量 。 


开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 版 的 梦想 。 你 可 以 联合 二 三 好 
友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 ， 这 极 大 地 降低 了 出 
版 的 门槛 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 


图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 有 意 翻译 哪 本 
图 书 ， 欢 迎 来 社区 申请 。 只 要 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 
要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 需要 有 坚强 的 毅力 的 。 


读者 交流 平台 
在 图 灵 社 区 ， 读 者 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评 论 ， 以 各 种 方式 与 


作 译 者 、 编 辑 人 员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 欢 迎 
大 家 积极 参与 社区 开展 的 访谈 、 审 读 、 评 选 等 多 种 活动 ， 赢 取 银 子 ， 可 以 换 书 哦 ! 


